How to make this layout images scale in Chrome like in Firefox (at different sizes)

HTML-CSS
1

So I’m puzzled with this. In Firefox images scale perfectly, while in Chrome they don’t.
I once had an issue that placeholders in Firefox looked “dimmed” it turns Firefox added an opacity to them and it was a matter of setting the placeholder opacity with the moz prefix. So my question here is what is doing Firefox that Chrome isn’t so I can replicate this in Chrome. Please take a look at the layout in Firefox and in Chrome here at different sizes https://www.tomastestart.cl/servicios/

This is what I think is the most relevant code:

.imagen-servicios {
  width:auto;
  max-height: 411px;
  object-fit: contain;
}

I have tried many variants without success really… so it looks perfectly in Firefox and really small in Chrome or too big (first image). I think object-fit here can be ignored as well (as I’m not specifying height)…

2

Try setting width to 100%.

1 Like
3

Thank you so much!! yeah that was it …is close enough and works pretty similary, there are some some minor differences but other than that is just fine. :slight_smile: