仅更改图像的宽度（仅 css）答案

【问题标题】：Change only the width of an image (css only)仅更改图像的宽度（仅 css）
【发布时间】：2014-07-31 00:45:16
【问题描述】：

我有一张图片（比如 150 x 300），我想将宽度只是更改为 1 像素，但希望图片保持其原始高度 300 像素（有实际逻辑这个最终目标，我发誓）。所以我的最终图像是 1 x 300。

当然，这应该很简单：

img {
    width:1px;
    height:300px;
}

但棘手的部分是，我不知道图像的高度。此图像是动态的，可以有任何尺寸。如何强制 CSS 忽略纵横比并使高度保持其初始值？我知道使用 jQuery 会很容易，但我想单独使用 CSS 来完成它。有什么想法吗？

提前致谢！

【问题讨论】：

【解决方案1】：

如果您的图像上定义了height 属性，您可以使用以下 CSS 简单地实现它：

img {
  width: 1px;
}

【讨论】：

【解决方案2】：

在纯 CSS 中，您可以将 clip 与 position: absolute 结合使用

img {
  position: absolute;
  clip: rect(0px 1px auto 0);
}

如您所见，您不需要指定图像的高度（auto 可以解决问题）。在真实页面中，您可能需要将图像包含在带有position: relative的容器中

【讨论】：

【解决方案3】：

如果您的意思是“在不考虑纵横比的情况下调整图像大小”，则可以将图像的 CSS3 的 object-fit 属性设置为 object-fit: fill。

img {
  width: 1px;
  object-fit: fill;
}

【讨论】：