将图像缩放到窗口的宽度[重复]答案

【问题标题】：Scale image to width of Window [duplicate]将图像缩放到窗口的宽度[重复]
【发布时间】：2017-05-18 17:52:31
【问题描述】：

我需要一种将图像缩放到窗口宽度的方法以下是我目前编写的代码 - 任何建议。高度应自动调整为宽度，从而保持图像的固有比例。

如果我更改 CSS，我什至需要设置高度，因为它会自动调整大小以设置宽度并保持比例？

<body>
<script>

    window.onload = resizeImage;

   (function($){

        $(window).enllax();

    });

    function resizeImage(){

        var w = window.innerWidth

       var images = document.getElementsByClassName("main");
        for(var i = 0; i < images.length; i++)
        {
            images(i).item.style.maxWidth = w;

        } 

    </script>

        <img class="main" src="images/bangkok.jpg">



</body>

【问题讨论】：

为什么不直接用 vw 作为宽度？
img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }

标签： javascript jquery html css media-queries

【解决方案1】：

要将图像缩放到窗口的宽度，您可以使用 CSS 属性“width”并以百分比形式给出值。

例如，如果你想让图像覆盖 80% 的窗口，请这样写：

width:80%;

将高度设置为自动以保持固有比例：

height:auto;

【讨论】：

当您的外部容器与窗口一样宽时，这是正确的。
vw 是 percent 的潜在替代品（opera mini、IIRC 不支持它，因此如果支持 OM 很重要，您可能需要回退）
我同意，但 VW（视口宽度）是一个敏感单位。我相信 1VW 大约等于 12.05 像素。因此，它不常用。但我同意这是一个很好的解决方案。