可以使用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属性来解决问题。

我现在想把一张图片作为背景放在div上想保持他原本的宽度和高度 如何自适应大小

原文地址: https://www.cveoy.top/t/topic/bsk1 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录