响应式图像缩放与变化的最大高度

Question

指出一个例子比试图解释我试图解决的问题要简单得多，所以我会这么做（对移动设备上的人们表示歉意，这是行不通的...）

我要实现的可VICE新闻（http://news.vice.com）

正如你所看到的，同时调整浏览器中看到的效果，图像的长宽比保持整个某些尺寸不变。它跳跃到1200px，再跳到700px，同时缩放宽度和高度。

有没有一种方法来实现这只使用CSS？我的头卡在这一个。

谢谢！

Answer 1

媒体查询，当然。

如果你看看他们的源代码，你会看到他们有3个不同版本的相同的图像显示在每个不同的大小（以最大限度地缩小比例）。然后，利用媒体查询，它们会显示正确的一个，并有其宽度填充页面：

这里的移动图像，例如：

@media only screen and (min-width: 43.75em) 
{ 
    .lede .lede-images img.mobile 
    { 
     display: none; 
    } 
} 

而这里的全局代码：

.lede .lede-images img.mobile 
{ 
    width: 100%; 
} 

将宽度设置为100％而不设置高度时，将在调整大小时自动保持高宽比。