在CSS中保持图片宽度的纵横比

Question

有没有一种使用css的方法在给定较小宽度的情况下修复图像的纵横比？也许可以使用jQuery / javascript吗？

谢谢！

- Jackson

---

好奇这个问题（和被接受的答案）在HTML画布上适用得如何。一切都进行得很顺利（它们就像图像一样，所以我只需设置一个维度），直到我注意到IE9不遵循此规则并扭曲了纵横比。 - Chris Bosco

Answer 1

使用纯CSS，你只能设置图片的一个维度，即width或height，并将另一个维度设为auto，例如：

.thumb { 
  width:200px;
  height:auto;
}

图片的宽度将固定为200像素，而高度将取决于其长宽比例。

- Christian C. Salvadó

---

不错啊。我之前不知道这个 :) - jrharshath

这将防止缩小的图像出现像素化吗？ - Jackson

@lnostdal，哪里出了问题？你尝试过什么？请发一个不起作用的示例，我很确定它是可以工作的（http://jsbin.com/ujageh）。 - Christian C. Salvadó

对我不起作用。已在IE，FF和Chrome上进行了测试！图像始终按比例缩放以填充整个父级容器。 - Adrian Pirvulescu

Answer 2

这里是jQuery的解决方案 ;)

function fixImage(elm) {
            elm = $(elm);
            var x = elm[0];

            var allowedHeight = 80;
            var allowedWidth = 80;
            if (width > height) {
                elm.css('width', allowedWidth + 'px');
                elm.css('height', 'auto');
            }
            else {

                elm.css('height', allowedHeight + 'px');
                elm.css('width', 'auto');

            }
}

- David

---

欢迎来到SO！我编辑了您的问题，以反映这是一个jQuery解决方案。x是什么？在每种情况下，allowed*会做什么（我猜它的作用，但作者的评论会更好）。为什么是80？有使用示例吗？（dummyimage.com不再起作用，但placekitten.com是一个很好的替代品） - FelipeAls