MR_Coder MR_Coder - 6 months ago 27
HTML Question

Flexbox, image bigger than div shrinks in safari but not in chrome

https://jsfiddle.net/MR_Coder/uo91um49/

In Safari once the browser starts to squish the image, the image starts to shrink.

What I want is the behavior in Chrome, the browser shrinks but the image stays at the same size.

Could someone test this in chrome and in safari to see what I mean?

HTML:




<div class="expand">
<img src="#" alt="driving me nuts">
</div>


CSS:

.expand
{
display: flex;
align-items: center;
justify-content: center;
background-color: red;
}


I apologize for that weird code. First time posting, won't let me post without code if I have a jsfiddle link.

Answer

You could do it like Bootstrap does for responsive images. Use the .image-responsive class on the image. It will scale both the smaller image and the larger image.

.expand
{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
}
.image-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
  <p>smaller works</p>
<div class="expand">
  <img src="http://placehold.it/350x150" alt="driving me nuts" class="image-responsive">
</div>

  <p>  bigger doesn't  </p>
<div class="expand">
  <img src="http://placehold.it/1000x150" alt="driving me nuts"  class="image-responsive">
</div>

Comments