html – 嵌套的CSS-Grids和图像大小调整

2023年11月12日 333次阅读

我正在学习CSS Grid,我在图像大小调整方面遇到了问题.

为了向您展示问题,我创建了一个包含2列的主布局,在第一列内部,我创建了另一个网格,我想在其中放置图像和一些文本.

请删除html评论,以便您看到图像.

在代码段中,红色区域显示图像应该到达的单元格.
现在,图像大于红色’容器'(高度：200px)网格单元格,我希望图像在单元格内缩小,以便它适合内部并保持纵横比(截止左/右或顶部)需要/底部).对象适合图像不起作用.将图像定位为“物体位置：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>

谢谢您的帮助.

最佳答案 您没有图像本身的样式.将以下行添加到样式表.

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

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

更新

你需要给你的.image元素一个位置：相对;溢出：隐藏;然后给你的img一个位置：绝对;最高：50％;左：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>
点赞