Jump to content

The object-fit Property


dantepicchioni

Recommended Posts

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

  • 3 weeks later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...