Question

我有一个填充整个页面的元素，背景图像适合其中：

position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;

background: url(path/to/image.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top center;

如果图像大于屏幕，则可以很好地缩小以适应窗口。但是，如果图像小于屏幕，则会扩大图像。我不想要扩展背景图片。

我知道我可以通过获取图像的大小和调整容器的CSS来解决这个问题 - 但我只是想知道是否有一个仅限CSS的解决方案 - 类似于max-background-height属性。

Answer 1

也许是这样的：

@media only screen
    and (min-width: 1280px /* largest size in px where you want the image to stop expanding */) {
        background-size: 1280px 798px;
        /* or whatever the original size of your image is */
    }

基本上，每当窗口调整大小超过指定宽度时，想法是为图像提供固定大小（原始的，最大的大小，不会变形）。

背景图像可以具有最大尺寸

1 个答案: