html - 仅更改图像的宽度(仅限 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/