CODEWITHSUNDEEP
htmlcssgoogle-chromesafariflexbox
SpaceOso
SpaceOso

Reputation: 408

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.

Upvotes: 2

Views: 2781

Answers (2)

Lukas Liesis
Lukas Liesis

Reputation: 26413

just add width of image in percents

img.w70p {
  width: 70%;
}

<img class="w70p" ...

And it will always be 70% width

Upvotes: 0

Chris Allen Moore
Chris Allen Moore

Reputation: 128

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>

Upvotes: 2

Related Questions