dantepicchioni Posted February 9, 2022 Share Posted February 9, 2022 Dear Colleagues, Hi. I know I could discover the answer for myself if I spent another month learning HTML+CSS+JS, but I would really appreciate some help. I modified How To - Responsive Image Grid (https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp) by deleting the @media code so that the images would not stack when the browser window size was changed and by changing all images in the row to wedding.jpg so that I would have a uniform sized image in all cells of the grid. Fine. Good. I next changed .column img { margin-top: 8px; vertical-align: middle; width: 100%; } to .column img { margin-top: 8px; vertical-align: middle; width: 100%; height: 100px; object-fit: none; object-position: 50% 6%; } with the goal of cropping wedding.jpg so that only the vicinity of the bride's mouth would be displayed. I solved one problem but created another. Now when I resize the browser window, the cropped section of the image becomes further cropped. I want the cropped section to stay the same when I resize the browser window and want it to scale down. Any help or advice on what tutorial contains the answer would be greatly appreciated. See attached for the gory details. Sincerely, Dante 06_02.htm Link to comment Share on other sites More sharing options...
dantepicchioni Posted February 26, 2022 Author Share Posted February 26, 2022 🙁🙁🙁 Link to comment Share on other sites More sharing options...
dantepicchioni Posted February 27, 2022 Author Share Posted February 27, 2022 Here is the answer: Changed width: 100% to width: auto Changed max-width: 14% to max-width: auto Deleted the wrap stuff in the row class Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now