Safari Image Size Auto Height CSS

Question

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!

Answer 1

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; } 

Answer 2

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

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