Safari Image Size Auto Height CSS

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

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

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

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

.userImg{
    object-fit: contain;
}

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

2019 year. check maybe the parent element

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

Related