如何解决Flex 显示保持图像原始纵横比
在一个 WordPress 博客上,我通过查询连续显示最近的帖子。特色图像具有不同的纵横比(有些是横向的,有些是纵向的),我希望图像保持其纵横比,并希望整个文章部分根据图像根据需要增长(横向)或缩小.
我目前的结果显示风景仅比肖像稍宽,并且所有图像,无论是风景还是肖像都被裁剪。 (由于 max-height 为 350px,但如果我将 max-height 设置得更高,则风景图像不会增长以填充高度。)
所以简而言之,我不希望裁剪任何图像,只是高度相同,宽度根据原始纵横比自动进行。
HTML 本质上是:
<section class="recent-posts">
<article>
<a[post link]>
Thumbnail
Post Title
</a>
Excerpt
</article>
</section>
(文章在版块内又重复了三遍。)
我目前拥有的 CSS 是:
.recent-posts {
display: flex;
justify-content: space-between;
}
.recent-posts img {
max-height: 330px;
height: max-content;
object-fit: cover;
}
.recent-posts article {
margin-bottom: 10px;
}
我宁愿不必使用 JS,但如果我必须这样做也无妨。有人可以告诉我我做错了什么,或者更好的方法是什么?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。