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

Posted 2023-05-08

【中文标题】如何防止网站在手机上显示裁剪图像？

【英文标题】：How to prevent site show cropped image on a phone?

【发布时间】：2019-05-19 05:09:49

【问题描述】：

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

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" >
        </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%;

我应该删除它吗？

【问题讨论】：

很可能是因为固定高度。它试图保持图像的纵横比

你建议我应该如何处理图像的高度？

为什么不使用 css 媒体查询。在桌面上保持固定高度，在移动屏幕上保持自动。看看情况如何。

移除对象-fit:cover

@godfather，完成后仍然裁剪，查看实时站点：doc.awsri.com

【参考方案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%;

【讨论】：

你看过这个吗？

不破坏我现有的功能？我需要媒体查询吗？你不回答我的问题。

你在现场做过吗？导致网站现在显示正确的图像

是的，它现在正在工作。我使用了 @Konstantinos Gounaris 的代码。

感谢您的帮助

【参考方案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;
    
 

【讨论】：

有了这个建议，我还是离开我的身高还是去掉它？

我没有注意到你的 img 父级也有 200px 的高度。如果您希望您的图片在移动设备上占据 100% 的宽度并且不被裁剪，则必须在 img 元素及其父 div 上取出 200px 的固定高度。如果您希望 img 元素以 200px 的固定高度完全可见，那么您必须将 object-fit:cover 更改为 object-fit :contain ，然后将图像元素居中。只需确保对媒体查询进行这些更改，以免桌面显示受到影响

请用您希望我尝试的确切代码更新您的答案。

谢谢，我会试试你的建议，谢谢你的帮助。我不太擅长 css。

取决于你想要什么。如果你想保持你的图片的高度 200px 使用第一个，如果你想要宽度 100% 并且高度大于 200px 使用第二个