图片高度不一致

<article class="cards">
<article class="card">
<img class="card-image" src="//cdn.shopify.com/s/files/1/0306/3834/2281/files/videoImg1.png?v=423003316238239167" alt="image" />
<div class="card-content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?</div>
<footer class="card-footer">
<a href="#" class="card-link">Link</a>
<a href="#" class="card-link">Link</a>
</footer>
</article>
<article class="card">
<img class="card-image" src="https://picsum.photos/320/240" alt="image" />
<div class="card-content">Lorem ipsum dolor sit amet.</div>
<footer class="card-footer">
<a href="#" class="card-link">Link</a>
<a href="#" class="card-link">Link</a>
</footer>
</article>
<article class="card">
<img class="card-image" src="https://picsum.photos/1024/768" alt="image" />
<div class="card-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, nam.</div>
<footer class="card-footer">
<a href="#" class="card-link">Link</a>
<a href="#" class="card-link">Link</a>
</footer>
</article>
</article>

取决于你是使用flex, grid还是block元素-问题可能来自不同的属性。假设你没有添加CSS，在你的html的<head>中，创建一个像<style></style>这样的样式块，在那里你可能想要添加你的样式属性，或者你可以提取这些到外部文件，如果你愿意的话。点击这里了解更多关于css和如何使用它的信息。

现在回到你的问题，一种方法是简单地为<img />标签添加高度和宽度属性所以你会做像

这样的事情

img{
width: 300px;
height:200px;
object-fit:contain;
}

object-fit: contain确保图像不会被拉伸。如果您想看到其他可能的解决方案(如网格或flex)，请更新您的问题

您可以在img标签中添加另一个div，并为其指定一些特定的高度。同样在你的img中给出高度和你的img中的div包装器一样。并在上面做适合物体的覆盖。检查下面的代码

.cards {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px
}
.card-image-wrapper {
border: 1px solid yellow;
height: 300px; /* add height to image wrapper */

}
.card-image {
width: 100%;
height: 300px; /* same height as card image wrapper */
object-fit: cover;
object-position: center;
}

<article class="cards">
<article class="card">
<div class="card-image-wrapper">
<img
class="card-image"
src="//cdn.shopify.com/s/files/1/0306/3834/2281/files/videoImg1.png?v=423003316238239167"
alt="image"
/>
</div>
<div class="card-content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?
</div>
<footer class="card-footer">
<a href="#" class="card-link">Link</a>
<a href="#" class="card-link">Link</a>
</footer>
</article>
<article class="card">
<div class="card-image-wrapper">
<img
class="card-image"
src="https://picsum.photos/320/240"
alt="image"
/>
</div>
<div class="card-content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?
</div>
<footer class="card-footer">
<a href="#" class="card-link">Link</a>
<a href="#" class="card-link">Link</a>
</footer>
</article>
<article class="card">
<div class="card-image-wrapper">
<img
class="card-image"
src="https://picsum.photos/1024/768"
alt="image"
/>
</div>
<div class="card-content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?
</div>
<footer class="card-footer">
<a href="#" class="card-link">Link</a>
<a href="#" class="card-link">Link</a>
</footer>
</article>
</article>

希望它能帮助你，给你一点想法。

相关内容

最新更新

热门标签：