如何防止网站在手机上显示裁剪图像？

Question

我有一个完美的网站，在桌面上看起来非常好。

doc.awsri.com

但它在手机上看起来很作物。

如何调整 css 以防止这种情况发生？

<div class="col-md-3 margin30">
    <div class="default-wrap wow animated fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
        <div class="img">
            <img src="http://doc.awsri.com/uploads/client/1545150130__FB_IMG_1545145675717 (2).jpg" class="img-responsive" alt="">
        </div><!--person image-->
        <div class="description">
            <h4>The man</h4>
            <span>ready to go</span>
        </div><!--desrciption-->
    </div><!--default-wrap-->
</div>

是不是因为我设置了这个固定高度 200px ？

.process-box a img, .default-wrap .img img {
    object-fit: cover;
    height: 200px;
    width: 100%;
}

我应该删除它吗？

Answer 1

我在现场看到你的 css，并认为你应该像下面这样对 css 进行一些更改

http://doc.awsri.com/client/css/style.css

.default-wrap .img {
    /* height: 200px; */
}

.process-box a img, .default-wrap .img img {
    /* object-fit: cover; */
    height: auto;
    width: 100%;
}

Answer 2

我看到图像问题从 991px 宽度开始。如果您想将图片的高度保持在 200 像素，则必须在您的 css 文件上创建一个媒体查询，如下所示。

@media screen and (max-width: 991px) {
  .process-box a img, .default-wrap .img img {
      object-fit: contain;
  }
}

如果您想保持图片的宽度为 100% 而失去 200px 的高度，则必须插入下面的代码。

@media screen and (max-width: 991px) {
    .default-wrap .img {
          height: auto;
    }
    .process-box a img, .default-wrap .img img {
          height: auto;
    }
 }