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

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

看看this answer。将maxWidth和maxHeight设置为屏幕尺寸。

您也可以使用css：

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