Image Stretching in Flexbox in Safari

Image stretching in flexbox in Safari

It certainly appears to be a bug.

The default setting for the align-items property is stretch. Most major browsers handle this sensibly, stretching the image within the confines of the container.

For whatever reason, Safari stretches the image to its natural height, taking the container along for the ride.

---

flex-direction: row

To fix the problem, override the stretch default value with flex-start in the align-items property.

.container {

  display: flex;

  flex-direction: column;

}

.container section:first-child {

  display: flex;

  align-items: flex-start; /* new */

  margin-bottom: 25px;

}

.container img {

  width: 125px;

  height: auto;

}

<div class="container">

  <section>

    <img src="http://i.imgur.com/60PVLis.png">

  </section>

  <section>

    <img src="http://i.imgur.com/60PVLis.png">

  </section>

</div>

Image is stretched on Safari with display flex

It seams to be not possible right now because of a bug in Safari, Firefox and some others.

So I removed the flex properties and added some normal style to keep the image centered in its container.

.box img {
  height: 100%;
  width: auto;
  position: absolute;
  left: -100%;
  right: -100%;
  top: -100%;
  bottom: -100%;
  margin: auto;
  max-width: none;
}

http://codepen.io/notyetnamed/pen/dYYYxP

Flexbox with sized images broken in Safari

Looks like another annoying browser inconsistency.

The solution appears to be the removal of flex-shrink: 1 from the image container.

Instead of this:

.block .thumbnail {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
}

Try this:

.block .thumbnail {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
}

Tested in Chrome, FF, IE11 and Safari.

Revised Pen

Image stretches on IOS devices and Safari, but totally fine on Chrome

Please remove d-flex from this code

<div class="col-lg-6 d-flex align-self-center img-right">
  <img class="f-img img-fluid" src="img/back.jpg" alt="Sample Image">
</div>

Please let me know if it helped.

Safari isn't stretching image to flexbox grid

In addition to Michaels suggestion, you could do like this, where I used background-image instead of img (since you use a given height anyway), and how to add text at an absolute position

html, body {

  margin: 0;

}

.featured-grid{

  display: flex;

  height: 100vh;

}

div {

  position: relative;

  background-position: center;

  background-repeat: no-reapat;

  background-size: cover;

  overflow: hidden;

}

.left {

  width: 66.666%;

}

.right{

  width: 33.333%;

  display: flex;

  flex-direction: column;

}

.right-top{

   flex: 1;

}

.right-bottom{

   flex: 1;

}

.text {

  position: absolute;

  left: 10px;

  bottom: 10px;

  color: white;     

}

.text > * {

  margin: 5px;     

}

<div class="featured-grid">

  <div class="left" style="background-image: url(https://unsplash.it/600/450?image=1055)">

    <div class="text">

      <h2>Title</h2>

      <h3>Text</h3>

    </div>

  </div>

  <div class="right">

    <div class="right-top" style="background-image: url(https://unsplash.it/600/400?image=1051)">

      <div class="text">

        <h2>Title</h2>

        <h3>Text</h3>

      </div>

    </div>

    <div class="right-bottom" style="background-image: url(https://unsplash.it/600/400?image=1057)">

      <div class="text">

        <h2>Title</h2>

        <h3>Text</h3>

      </div>

    </div>

  </div>

</div>

Why is my picture stretched on mobile iphone safari?

Try using and see if it helps

object-fit: cover;

Check this link for more details
https://developer.mozilla.org/en/docs/Web/CSS/object-fit

Background image not stretched correctly in Safari

To fix this, I needed to add preserveAspectRatio="none" to the <svg> element in the image file. Safari's default behavior for preserving the aspect ratio for SVG images is different than the default of other browsers. Adding that attribute allowed me to stretch the image to an unnatural aspect ratio.

---

Related Topics