使用 css 网格在移动视图中拉伸图像

Question

我使用 css 网格来放置图像，在桌面上它看起来不错，但在移动设备上它被垂直拉伸了。我已经设置了另一个正确显示的相同尺寸的图像。一切都已设置 same.Please 在下面找到 css 两张图片的代码。我对图像名称 cic-img 有疑问。 voc-img 显示正确。

.voc {
   display:grid;
   grid-template-columns: repeat(4, 25%);
   grid-template-rows: max-content(30%) auto max-content(33%);
   grid-gap: 10px;
   margin: 9rem auto;
   padding: 0 4rem;
   width: 850px;
   text-align: center;
   overflow:hidden;
}

.voc-img {
   grid-column: 2 / 4;
   grid-row: 1/ 4; 
   width: 100%;
   max-height: 100%;
}

.cic {
   display: grid;
   grid-template-columns: repeat(4, 25%);
   grid-template-rows: max-content(30%) auto max-content(33%);
   grid-gap: 10px;
   margin: 9rem auto;
   padding: 0 4rem;
   width: 850px;
   text-align: center;
   overflow: hidden; 
}

.cic-img {
   grid-column: 2 / 4;
   grid-row: 1/ 4; 
   height: 100%;
   width:100%;
}

Answer 1

在您的 CSS 中，我可以看到您的 .cic-img 和 .voc-img 没有相同的高度属性（max-height: 100% 与 height: 100%）。这很可能解释了为什么两个图像没有以相同的方式呈现。

考虑将 .cic-img 的 height: 100% 替换为 max-height: 100%，这样它的高度就不会被迫正好是 100%。

作为旁注，object-fit CSS 属性应该有用，而不是玩弄宽度和高度。

使用 css 网格在移动视图中拉伸图像

Image stretched in mobil view using css grid

css

grid

image

mobile-safari