我正在学习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>