Question

如果宽度小于img（图片max-width为200px，如何设置height的大小，使其height设置为max-width如果200px大于width，则在这种情况下自动保留宽高比，并将height设置为min-height？

使用min-width和.没有用，因为图片会非常大（它会有原始大小）。

Answer 1

尝试这种方式

$("selector img").each(function () {
        var imgwidth = $(this).width();
        var imgheight = $(this).height();
        if (imgwidth > imgheight) {
            $(this).css('width', '100%');
            $(this).css('height', 'auto');
        }
        else if (imgwidth < imgheight) {
                $(this).css('width', 'auto');
                $(this).css('height', '100%');
            }
    });

Answer 2

单独使用css无法做到这一点。你需要javascript或jQuery。我还不清楚你的问题。

假设您想设置height:200px if width＆gt;身高，反之亦然。

$("img").each(function () {
    var width = $(this).width();
    var height = $(this).height();

    if (width > height) {
        $(this).css('width', 'auto');
        $(this).css('height', '200px');
    }
    else if (width < height) {
            $(this).css('max-width', '200px');
            $(this).css('height', 'auto');
        }
});

Answer 3

如果我已正确理解您的问题，您将能够使用vanilla javascript直接达到此结果：

var image = document.getElementsByTagName('img')[0];
var imageWidth = image.offsetWidth;
var imageHeight = image.offsetHeight;

if (imageWidth > imageHeight) {
    image.style.height = '200px';
    image.style.width = 'auto';
    }

else if (imageHeight > imageWidth) {
    image.style.width = '200px';
    image.style.height = 'auto';
    }

}

根据哪个尺寸较小来限制图像宽度或高度

3 个答案: