html - 调整图像大小以保持纵横比

Question

我希望我的图像在浏览器窗口中尽可能大，但它们永远不会丢失纵横比。当浏览器调整大小时，图像也应该是。所有图像都应始终可见。

我现在使用这个脚本，但结果不是我想要的。谁能告诉我如何解决这个问题，以便图像尽可能宽和尽可能高而不会丢失纵横比？我想应该使用某种最大宽度和最大高度？

<script>
var W = $(window).width(),
    H = $(window).height();

$('img').height(H).width(W);



function imgsize() {
    var W = $(window).width(),
        H = $(window).height();

    $('img').height(H).width(W);
}
$(window).bind('resize', function() { imgsize(); });

</script>

Answer 1

看看这个答案。设置maxWidth和maxHeight屏幕尺寸。

您还可以使用 css：

max-width: 100%;
max-height: 100%;