css - 在没有包装的情况下更改图像的纵横比答案

【问题标题】：css - change aspect ratio of an image without wrappercss - 在没有包装的情况下更改图像的纵横比
【发布时间】：2018-01-18 02:01:06
【问题描述】：

我有图像 A 的宽度和高度，我想将图像B的纵横比更改为没有任何容器元素的A的纵横比，例如div、a等。

那么，在没有任何容器元素的情况下，图像 B 的纵横比是如何得到 A 的呢？

【问题讨论】：

标签： css image

【解决方案1】：

如果你想在没有容器的情况下改变纵横比，你可以对图像 B 使用变换。这当然会扭曲图像，但这是不可避免的，因为你正在改变纵横比。

scale 转换将按您指定的倍数缩小或扩展元素。

为了使它起作用，您需要知道图像 B 的大小与图像 A 的大小之间的关系。这不会是完全自动的。

在下面的示例中，我们有两个图像：A. 是 200x300，B. 是 400x100。

我们希望 B 的大小与 A 相同，因此我们需要将 B 的宽度减半并将其高度乘以 3。在 CSS 中，这意味着我们执行 scaleX(0.5) 和 scaleY(3.0)。

最终结果是这样的：

img:nth-child(2) {
  transform: scaleX(0.5) scaleY(3.0);
}

<img src="http://placehold.it/200x300">

<img src="http://placehold.it/400x100">

您也可以选择不同的数字来获得相同的纵横比，但两张图片的大小不完全相同。例如，transform: scaleX(0.25) scaleY(1.5) 会以图像 A 的纵横比为您提供图像 B，但大小是图像 A 的一半。

【讨论】：

【解决方案2】：

你可以试试height: auto CSS 属性。即使 HTML 属性 width 和 height 没有保持纵横比，height: auto CSS 也会解决这个问题。

.minisize {
  height: auto!important
}

我的代码演示。即使宽度为 300px，高度为 1px，它仍然显示一个较小的图像，保持纵横比：https://jsfiddle.net/99qrn65L/

【讨论】：