html - 更改最大高度时的自适应图像缩放

指向一个示例比尝试解释我要解决的问题要简单得多，因此我将做到这一点（对移动电话上的人表示歉意，这将无法工作...）

我想达到的效果可以在VICE新闻（http://news.vice.com）上看到

如您在调整浏览器大小时所看到的，图像的高宽比在某些尺寸下保持不变。它会同时以1200px和700px的高度跳转，同时缩放宽度和高度。

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

谢谢！

最佳答案

媒体查询，当然。

如果查看它们的源代码，您将看到它们具有3种不同版本的同一图像，并以每种不同大小显示（以最小化缩放比例）。然后，通过使用媒体查询，它们将显示正确的查询并使其宽度充满页面：

这是移动图片，例如：

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

这是全局代码：

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

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