时间戳

首页 > 解决方案 > 使用css网格在移动视图中拉伸的图像

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

问题描述

我使用 css 网格放置图像，在桌面上它看起来正确，但在 mobil 上它是垂直拉伸的。我设置了另一个尺寸相同的图像，可以正确显示。一切都设置相同。请在下面找到两个图像的 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%;
}

标签： cssimagegridmobile-safari

解决方案

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

考虑将.cic-img's替换height: 100%为max-height: 100%，这样它的高度就不会被强制为 100%。

object-fit顺便说一句， CSS 属性应该是有帮助的，而不是玩弄宽度和高度。

推荐阅读