css 如何让图片铺满整个容器，比例不变，且不被裁剪

.first-screen-modal{//父容器position: absolute;left: 0;top: 0;right:0;height: 800px;width: 600px;z-index: 100;margin: 100px 75px 306px 75px;.photo-bg{//背景图对应的divbackground-image: url(images/rest.png);bor

南城夏季

8558人浏览 · 2020-09-18 17:20:33

南城夏季 · 2020-09-18 17:20:33 发布

.first-screen-modal{  //父容器
  position: absolute;
  left: 0;
  top: 0;
  right:0;
  height: 800px;
  width: 600px;
  z-index: 100;
  margin: 100px 75px 306px 75px;
  .photo-bg{   //背景图对应的div
    background-image: url(images/rest.png);
    border-radius: 16px;
    width:100%;
    height:100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size:contain;   //关键属性
  }

background-size:contain; //关键属性，此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。只要背景图宽高有一边达到容器的边框，就会停止放大