CODEWITHSUNDEEP
css
Jared
Jared

Reputation: 2483

Safari Image Size Auto Height CSS

I am testing this problem in the latest version of Safari for Windows 7.

The problem is that this code works in all other browsers BUT safari:

 <style type="text/css">
    .userImg { height: 100%; width: 100%; }
    .imgContainer { height: auto; width: 150px; }
 </style>

 <div class="imgContainer">
    <img id="img" class="userImg" src="TemplateFiles/Hydrangeas.jpg" alt="" />
 </div>

Does anyone know of a trick to get this to size the image proportionally in Safari using just CSS?

Thanks!

Upvotes: 26

Views: 54562

Answers (8)

Jelle
Jelle

Reputation: 49

I solved it with:

img
{
   position: absolute
}

strangely... but that might give new problems you need to fix

Also adding width 100% seems to fix it:

img
{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

Upvotes: 0

Maxim Kiselyow
Maxim Kiselyow

Reputation: 63

I encountered a similar issue with controlling the width of images in my project. I found that setting the CSS overflow property to hidden on the img element effectively resolved the issue. Here's how I applied it:

.images-contaner {
  display: flex;
  flex-wrap: wrap;
  max-height: 126px;
}
img {
  margin-right: 4px;
  max-height: calc(25% - 4px);
  overflow: hidden;
}

Upvotes: 0

FOMSON
FOMSON

Reputation: 1

Seems to work in both Safari and Chrome...

.container: {
 height={"100%"}
 display="contents"
}

.image: {
 height={"100%"}
}

Upvotes: -1

SystemX
SystemX

Reputation: 371

Try this: Parent has display:flex Child has align-self:center

@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body {
  font-family: "Slabo 27px", serif;
}
h2 {
  text-align: center;
}
[data-flex] {
  display: flex;
  width: 80%;
  max-width: 800px;
  font-size: 1.2rem;
  margin: 0 auto;
  line-height: 1.5;
}
[data-flex] > img {
  margin-right: 2rem;
  width: 30%;
}
[data-center] {
  align-items: center;
}
[data-flex] div, [data-flex] p {
  flex: 1;
}
[data-flex] div {
  margin-right: 2rem;
}
[data-flex] div img {
  width: 100%;
}
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<h2>By default, images that are flex-children will be their <em>natural</em> height, regardless of their width:</h2>
<div data-flex>
  <img src="sophie.jpg" alt>
</div>
<h2>This can be avoided by <em>not</em> specifying a width for the image, but that makes it non-responsive:</h2>
<div data-flex>
  <img src="sophie.jpg" alt style="width: auto">
</div>
<h2>Solution 1: apply <code>align-self: center</code> to the image</h2>
<div data-flex>
  <img src="sophie.jpg" alt style="align-self: center">
</div>

<h2>Solution 2: apply <code>align-items: center</code> to the flex container</h2>
<div data-flex data-center>
  <img src="sophie.jpg" alt>
</div>

<h2>Solution 3: Place the image inside another container, and make <em>that</em> the flex-child</h2>

<div data-flex data-center>
  <div>
  <img src="sophie.jpg" alt>
  </div>
</div>

Upvotes: 2

canastasia
canastasia

Reputation: 91

For those who needs to use height auto you an also try with this :

.userImg{
    object-fit: contain;
}

Upvotes: 9

David Vor&#225;č
David Vor&#225;č

Reputation: 1421

For those who needs to use height auto and parent of image is set to display: flex, this trick will help.

image { align-self: flex-start; }

If your parent of image has set flex-direction: column, you need to do this instead.

image { justify-self: flex-start; }

Upvotes: 124

Дмитрий Бабанин
Дмитрий Бабанин

Reputation: 81

.userImg { width: 100%; height: auto; }
.imgContainer { width: 150px; }​

2019 year. check maybe the parent element

.imgContainer { display: flex; align-items: stretch}

Upvotes: 4

j08691
j08691

Reputation: 207891

Just set only the width on the image. The browser will scale the image proportionally automatically.

.userImg { width: 100%; }
.imgContainer { height: auto; width: 150px; }​

Upvotes: 16

Related Questions