仅更改图像的宽度（仅限css）

Question

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

当然这应该像以下一样简单：

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

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

提前致谢！

Answer 1

如果在您的图片上定义了height属性，您可以使用此CSS轻松实现：

img {
  width: 1px;
}

http://jsfiddle.net/yvr57/

Answer 2

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

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

Answer 3

在纯CSS中，您可以将clip与position: absolute

结合使用

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

示例：http://codepen.io/anon/pen/siyDe

如您所见，您不需要指定图像的高度（auto就可以了）。在实际页面中，您可能需要将图像封装在具有position: relative

的容器中