html - 使图像尽可能大，以适应，缩放，即使它需要拉伸(stretch)得更大

Question

我的网页上有动态内容，其中包含一些图片。在大屏幕上，我将图像 float 到页面右侧，而在小屏幕上，我将图像视为一个 block 并将其宽度设置为屏幕的 100%。

这对大多数图像来说效果很好，但有时图像真的很高，这使得在图像占屏幕宽度 100% 的小屏幕上很难显示，您可能需要滚动一段时间才能通过图片。

为了解决这个问题，我为图像设置了最大高度，并在第一张图像后面有一个图像的模糊副本，该图像的宽度为 100% 以填充空白。 (有点像电视台在以一种分辨率播放并以不同分辨率播放视频时所做的事情)。

效果很好，除了我希望图像尽可能大，100% 宽度或最大高度。对于小图像，它与实际图像的尺寸一样大。

figure{position:relative;overflow:hidden;float:right;width:202px;margin:0 0 0.5rem 0.5rem;font-size:0;text-align:center}
figure img{margin:auto;max-width:100%;max-height:400px;width:auto;height:auto;display:block;border:0}
figure span{display:block;position:absolute;z-index:-1;filter:blur(10px);-ms-filter:blur(10px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');top:-10px;left:-10px;padding:10px;width:100%;height:100%}
figcaption{text-align:left;background:#fff;font-size:0.75rem}

@media(max-width:528px){
figure{float:none;margin:0 auto;width:100%}
figure img{max-height:300px}}

<figure>
<a href="#"><img src="dynamicPic.jpg">
<span style="background:url(dynamicPic.jpg) no-repeat center;background-size:cover"></span>
</a>
<figcaption>Dynamic Caption</figcaption>
</figure>

Answer 1

我认为一点点 Javascript 就可以做到这一点

var img = document.getElementById("image-id-here");
img.onload = function(){
    var maxWidth = (document.body.clientHeight / img.height) * img.width;
    var maxHeight = (document.body.clientWidth / img.width) * img.height;
    if(maxWidth > document.body.clientWidth){
        img.width = img.width * (maxHeight / img.height);
        img.height = maxHeight;
    }else{
        img.width = maxWidth
        img.height = img.height * (maxWidth / img.width);
    }
}

这应该将图像调整为最大尺寸但仍保持纵横比。

重要:上面的代码应该在图像标签加载后运行