嵌套的CSS网格和图像调整大小

Question

嵌套的CSS网格和图像调整大小

4

我正在学习CSS Grid，但是在调整图片大小方面遇到了问题。

为了向您展示问题，我创建了一个包含两列的主要布局，并在第一列内创建了另一个网格，在其中我想在一列中放置一张图片和一些文本。

请删除HTML注释，以便您可以看到图片。

在代码片段中，红色区域显示了图片应该放置的单元格。现在，图片比红色“容器”（高度：200px）网格单元格大，我希望图片缩小到单元格内，以适合并保持纵横比（需要左/右或上/下的裁剪）。图像上的object-fit不起作用。像“object-position: 50% 50%”这样定位图片也很好，但也无法正常工作。我目前不确定如何解决这个问题。

.mainlayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.media {
  grid-column: 1 / 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 200px auto auto;
}

.media .image {
  grid-column: 1;
  grid-row: 1;
  background-color: red;
}

.media h4 {
  grid-column: 1;
  grid-row: 2;
}

.media p {
  grid-column: 1;
  grid-row: 3;
}

<section class="mainlayout">
  <div class="media">
    <div class="image">
      <!--<img src="http://placehold.it/1000x1000">-->
    </div>
    <h4>Card title</h4>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</section>

感谢您的帮助。

- dave_zen

这是大多数人使用的解决方案 ->> https://jsfiddle.net/nsrfpkb2/7/ - Morpheus

对象位置属性确定其框中替换元素的对齐方式。 - Morpheus

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SKeurentjes · Accepted Answer

您的图片本身没有样式。请将以下行添加到您的样式表中。

.media .image img {
  display: block;
  max-width: 100%;
  height: auto;
}

示例：https://jsfiddle.net/nsrfpkb2/8/

更新

您需要为您的.image元素添加position: relative;和overflow: hidden;。然后给您的img添加position: absolute; top: 50%; left: 50%;以及transform: translate(-50%, -50%);

.news_layout{
        display:grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    
    .media{
        grid-column: 1 / 2;
        grid-row: 1;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 200px auto auto;
        position: relative;
    }
    
    .media .image{
        height: 200px;
        grid-column: 1;
        grid-row: 1;
        background-color:red;
        position: relative;
        overflow: hidden;
    }
          
    .media .image img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        max-width: 100%;
        height: auto;
    }
    
    .media h4{
        grid-column: 1;
        grid-row: 2;
    }
    
    .media p{
        grid-column: 1;
        grid-row: 3;
    }

<section class="news_layout">
  <div class="media">
   <div class="image">
    <img src="http://placehold.it/1000x1000">
  </div>
  <h4>Card title</h4>
  <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</section>