有没有可能有相同高度的div,其中包含不同高度的图像?我不能使用 height
css 属性,因为我不知道高度。
* {
box-sizing: border-box;
}
.magazine-items {
width: 500px;
display:flex;
flex-flow:row wrap;
}
.magazine-item {
width:33%;
display: grid;
grid-template-areas: "image image image"
"text text text";
border: 1px solid red;
align-content: flex-start;
}
.magazine-item img {
width:100%;
}
.text{
grid-area: text;
}
.img {
grid-area: image;
}
.double-text {
width:80%;
margin:auto;
}
<div class="magazine-items">
<div class="magazine-item">
<div class="img">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/800px-Islas_Coronado.cc.jpg" alt="">
</div>
<div class="text">
<p>Porovnání detailů designu série Elle a Effe</p>
</div>
</div>
<div class="magazine-item">
<div class="img">
<img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
</div>
<div class="text">
<p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.
Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
</div>
</div>
<div class="magazine-item">
<div class="img">
<img src="https://dummyimage.com/600x400/000/fff" alt="">
</div>
<div class="text">
<p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
</div>
</div>
</div>
这是我设法用 flexbox
和 grid
做的,但它仍然不知道如何在不知道图像大小的情况下为 div 设置相同的高度。
有什么想法吗?谢谢
编辑: 这是我的期望: Edit2: 我重新表述了我的问题。有没有机会在不使用 javascript 或固定高度的情况下获得图片中的 div?
最佳答案
你能用 background-image 代替 img 吗? 例如,您可以这样做。
.img {
background: url(images/bg.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 600;
height: 400;
}
关于html - CSS - 具有相同高度但图像高度不同的 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55627089/