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

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%;
}