响应图像缩放，改变最大高度

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％将在调整大小时自动保持宽高比。