Question

.ava-block {
  width: 220px;
  min-height: 155px;
  background: url(../images/no-banner.png) no-repeat;
  border-right: 1px solid #e8e8e8;
}

@media (max-width: 992px) {
   .ava-block {
      width: 100%;
      
      background-size: cover;
   }
}

     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
     <div class="row">
                    <div class="col-md-3">
                        <div class="ava-block" style="background-image: url(https://www.dean.ngo/wp-content/uploads/2018/12/projectElimu-220x155.png);">
                            
                        </div>
                    </div>
     </div>

我做cover，但是图像质量变差。我该怎么做呢？我需要在平板电脑和移动设备上做全屏图像，而不会降低质量并显示完整图像。图片的宽度只能为220px，高度只能为155px。

Answer 1

除非使用可缩放的图像类型（例如矢量），否则在保持图像质量的同时无法缩放图像。

要解决图像超出比例的问题，您可以为内部块分配和最大值，以确保其不超过您指定的width：220和height：155的最大尺寸，也可以只设置尺寸静态的。如果我对这个问题的解释正确，则可以尝试以下操作：

  .ava-block {
  width: 220px;
  height: 155px;
  border-right: 1px solid #e8e8e8;
  color: black;
}

@media (max-width: 992px) {
  .ava-block {
    width: 100%;
  }
}

HTML

 <div class="row">
          <div class="col-md-3">
            <div class="ava-block">
              <img style='height: 100%; width: 100%; object-fit: contain' src='https://www.dean.ngo/wp-content/uploads/2018/12/projectElimu-220x155.png' />

            </div>
          </div>
        </div>

Bootstrap 4全屏图片

1 个答案: