html - css怎么实现背景图片自适应浏览器窗口大小？有特殊要求，进来看

问题描述

问 题

我有一个div，这个div高度是根据元素的数量来决定的，但是宽度和浏览器宽度一样，我设了一张背景图片，高度和div的高度一致，在缩放窗口到一定程度时，因为图片宽度不够div的两侧会出现空白，我想通过css实现

1，当浏览器太宽时，图片设置为宽度的100%
2，当浏览器太窄时，图片设置为高度的100%

这样子图片就可以既不变形又能铺满整个div，我想过@media，但毕竟是死的，我在增删元素的时候就会出现两边白的情况

解决方案

{
    background-size:cover;
    background-position:center;
}

这篇关于html - css怎么实现背景图片自适应浏览器窗口大小？有特殊要求，进来看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！