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
Why Border of <Tr> Not Showing in Ie
CSS Font Differences Between Browsers
Less: Inheritance Using a Variable
Css-Grid: Bleed Background Outside Container
Achieving This Hr Element with CSS Styling - Pseudo Elements
Does Width Property Affects Clear
Unexpected CSS Result Using IE8 with Styling Links
Understrap Child-Theme Edit Not Visible, SASS Color Variable Not Applied
Codeigniter - Simple Base_Url Question
How to Do Browser Specific Conditional CSS Inside a *.CSS File
Galaxy S4 Stock Browser CSS3 Border-Radius Support
Bootstrap 4.1 - to Get Grid System Only
Javafx CSS Border-Radius Issue
Custom List Style for Ordered Lists
Wrapping a Text Around a Circular Element
"Text-Decoration" and the ":After" Pseudo-Element