如何在容器小于css中的某个宽度时调整图像窗口的大小

Question

我的图像宽度为1920像素。我希望它在浏览器窗口中显示居中和裁剪的宽度大于1024像素。当浏览器宽度小于1024时，图像应居中并裁剪为1024像素，然后调整为浏览器宽度。

我无法弄清楚如何做到这一点，还没有在互联网上找到任何解决方案。 任何人都可以告诉我如何做到这一点，或者指出我的例子吗？

Answer 1

我不确定你想做什么，但我认为你在寻找的是： GET

http://www.w3schools.com/cssref/pr_dim_max-width.asp

Answer 2

您可以使用object-fit属性：

.image-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
    }
}

HTML

<div class="image-wrapper">
    <img src="" />
</div>

Answer 3

您正在寻找的是使用媒体查询实现的目标。以下只是一个例子。希望你能继续这样做。

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

当您调整浏览器大小并且浏览器宽度小于480px时，此处将更改背景颜色。