Safari图像大小自动高度CSS

Question

我正在最新版本的Safari for Windows 7中测试此问题.

问题是这个代码适用于所有其他浏览器但仍可以使用:

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

有没有人知道如何使用CSS在Safari中按比例调整图像大小？

谢谢!

Answer 1

对于那些需要使用 height auto并且图像的父级设置为 display: flex 的人，这个技巧会有所帮助。

image { align-self: flex-start; }

如果你的图像的父级设置了 flex-direction: column，你需要这样做。

image { justify-self: flex-start; }

Answer 2

对于那些需要使用height auto 的人，您也可以尝试使用以下方法：

.userImg{
    object-fit: contain;
}

Answer 3

只需在图像上设置宽度即可.浏览器将按比例自动缩放图像.

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