Safari图像大小自动高度CSS

我正在最新版本的SafariforWindows7中测试这个问题

问题在于，除了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>

.userImg{高度：100%；宽度：100%；}
.imgContainer{高度：自动；宽度：150px；}

有人知道在Safari中使用CSS按比例调整图像大小的诀窍吗

---

谢谢

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

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

2019年。 检查父元素

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

---

对于那些需要使用“高度自动”且图像的父级设置为“显示：flex”的用户，此技巧将有所帮助

image { align-self: flex-start; }

如果图像的父级设置了flex direction:column，则需要执行此操作

image { justify-self: flex-start; }

---

对于那些需要使用高度自动的人，您也可以尝试以下方法：

.userImg{
    object-fit: contain;
}

试试这个： 父项具有显示：flex 子对象具有对齐自我：中心

@导入url（'https://fonts.googleapis.com/css?family=Slabo+27px'）；
身体{
字体系列：“Slabo 27px”，衬线；
}
氢{
文本对齐：居中；
}
[数据弹性]{
显示器：flex；
宽度：80%；
最大宽度：800px；
字号：1.2rem；
保证金：0自动；
线高：1.5；
}
[data flex]>img{
右边距：2em；
宽度：30%；
}
[数据中心]{
对齐项目：居中；
}
[data flex]div[data flex]p{
弹性：1；
}
[data flex]部门{
右边距：2em；
}
[data flex]部门图像{
宽度：100%；
}

默认情况下，无论图像的宽度如何，弯曲子图像都将是其自然高度：
这可以通过不指定图像的宽度来避免，但这会使图像无响应：
解决方案1：对图像应用
align self:center
解决方案2：将
align items:center
应用于flex容器
解决方案3：将图像放在另一个容器中，并使其成为flex子容器

太棒了，我刚才遇到了这个问题，解决办法是你昨天对8年前一个问题的回答表。这可能是Safari中的一个新错误吗？哈哈，我想这是个好时机。但我不会说这是一只虫子。众所周知，Safari在许多情况下的表现与其他已知浏览器不同，但这些都不是bug。设置display flex时，它还会为其子项指定一些其他属性。align项目的flex子项的初始值为拉伸。我的猜测是，正因为如此，图像可能会忽略您设置的高度，而纵横比会被破坏。在2020年的Safari中，也可以使用弯曲图像来实现这一点，ty David！谢谢@DavidVoráč！我会付钱给任何能告诉我为什么Safari的行为如此令人困惑的人。它符合规范吗？Safari是一款我会庆祝被谷歌眨眼帝国吞没的浏览器。它应该是公认的解决方案！在2020年Safari iOS上仍然是一个有效的修复程序，但不能按比例扩展：|

.userImg{
    object-fit: contain;
}