保持纵横比与图像宽度在css中

Question

有没有办法使用css修复宽度较小的图像宽高比？也许通过使用jQuery / javascript？

谢谢！

Answer 1

使用普通CSS，您只能设置图片的一个维度，width或height，另设置为auto，例如：

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

图像的宽度固定为200像素，高度取决于宽高比。

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');

            }
}