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

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宽度。如果要保持图片的高度为200px，则必须在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;
    }
 }