我现在想把一张图片作为背景放在div上想保持他原本的宽度和高度 如何自适应大小
可以使用CSS中的background-size属性来实现背景图片自适应大小。默认情况下,background-size的值为auto,即保持背景图片的原始大小不变。若要自适应大小,可以将background-size的值设置为cover或contain。
- cover:背景图片会被缩放以填充整个div,可能会导致图片被裁剪。
- contain:背景图片会被缩放以适应整个div,可能会留有空白。
示例代码如下:
div {
background-image: url('图片地址');
background-size: cover; /* 或 contain */
background-repeat: no-repeat;
background-position: center center;
}
需要注意的是,若图片的宽高比例与div的宽高比例不同,会出现拉伸或压缩的情况。此时,可以考虑使用CSS3中的object-fit属性来解决问题。
原文地址: https://www.cveoy.top/t/topic/bsk1 著作权归作者所有。请勿转载和采集!