Safari 图像大小自动高度 CSS答案

【问题标题】：Safari Image Size Auto Height CSSSafari 图像大小自动高度 CSS
【发布时间】：2021-01-01 03:59:33
【问题描述】：

我正在最新版本的 Safari for Windows 7 中测试这个问题。

问题是这段代码可以在所有其他浏览器中运行，但 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>

有谁知道在 Safari 中仅使用 CSS 来按比例调整图像大小的技巧吗？

谢谢！

【问题讨论】：

标签： css

【解决方案1】：

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

image { align-self: flex-start; }

如果您的图片的父级设置了 flex-direction: column，您需要改为这样做。

image { justify-self: flex-start; }

【讨论】：

太棒了，我刚才遇到了这个问题，解决方案是你昨天对 8 年前的一个问题的回答。这可能是 Safari 中的一个新错误吗？
哈哈，我猜是好时机。 但我不会说这是一个错误。 众所周知，Safari 在许多情况下与其他已知浏览器的行为不同，但这些都不是错误。当您设置 display flex 时，它还会为其子项分配一些其他属性。 align-items 的 flex 子元素的初始值为 stretch。 我的猜测是由于这个原因，图像可能会忽略您设置的高度，然后纵横比就会被破坏。
大卫 2020 年也可以在 Safari 中使用弯曲图像来实现这一目标！
谢谢@DavidVoráč！谁能告诉我为什么 Safari 会以这种令人费解的方式运行，我会付钱给任何人。是否符合规范？ Safari 是我会庆祝被 Google 的 Blink 帝国蚕食的唯一浏览器。
应该是公认的解决方案！在 2020 年仍然是有效的修复

【解决方案2】：

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

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

【讨论】：

在 Safari iOS 上它不会按比例缩放：|

【解决方案3】：

对于那些需要使用height auto的人，你也可以试试这个：

.userImg{
    object-fit: contain;
}

【讨论】：

【解决方案4】：

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

2019 年。检查可能是父元素

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

【讨论】：

【解决方案5】：

试试这个：父母有 display:flex 孩子有 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>

【讨论】：