时间戳

首页 > 解决方案 > CSS移动图像失真问题

html - CSS移动图像失真问题

问题描述

我正在一个网站上工作，该网站有一个由三个图像组成的面板，这些图像在屏幕上形成了一种横幅。像这样，就像第一张图片一样。当我在 iPhone 或 iPad 上查看时，图像被垂直拉伸，如第二张图所示。这似乎不是浏览器问题，因为问题在 Chrome 和 Safari 上都存在，但这也不仅仅是视口宽度的问题，因为当我在计算机上使用相同的 vw 时，我没有得到这个问题。我清除了浏览器缓存，问题仍然存在。有趣的是，并非网站上的所有图片都是如此。他们中的大多数人没有这个问题。

桌面：https ://ibb.co/TWQ4S70 移动：https ://ibb.co/Km7k4NF

所附图片的 HTML 和 CSS 如下：

HTML：

 <div class="panel-3">
        <img src="/img/matthew-james-dunham.jpg" title="Matthew Weathers (MM 2019), playing in masterclass for Rice University viola professor James Dunham"
        ><img src="/img/nuso-violas.jpg" title="Members of the studio play in the Northwestern University Symphony Orchestra viola section"
        ><img src="/img/sae-rheen.jpg" title="Sae Rheen Kim (BM 2020) plays in studio class">
    </div>

CSS：

.panel-3 {
    display: flex;
    padding: 10px;
}

.panel-3 img {
    width: calc(100% / 3);
}

知道这里会发生什么吗？

标签： htmlcssflexbox

解决方案

图像失真从来都不是一件有趣的事。一个简单的解决方案是使用object-fit css 属性来定义图像在其容器变形时的行为。

panel-3 {
    display: flex;
    padding: 10px;
}

.panel-3 img {
    width: calc(100% / 3);
    height: auto;
    object-fit: cover;
}

推荐阅读