Html 如何将FlexBox项目zoom 到其包含图像的大小

发布于03月08日

我想创建一个响应性的图片库使用Flexbox，其中每一行都有不同尺寸的图像，这些图像被zoom 到相同的高度，同时保留长宽比.例如，如果一行有一个100x50图像和一个100x100图像，则100x50图像应zoom 到200x100，以便这两个图像可以放置在高度为100px的行中.

换句话说，页面应该有两张这样的图片:

并像这样显示它们:

我试图通过在图像上使用min-height: 100%和width: auto来实现这一点.问题是，当100x50图像zoom 到200x100时，它溢出超过其art-item容器，而当放置第二个图像时，它与第一个图像重叠，结果如下所示:

以下是演示我的try 的一个片段:

.art-container {
  display: flex;
}

.art-item>img{
  min-height: 100%;
  width: auto;
}

<div class="art-container">
  <div class="art-item"> <img src='https://dummyimage.com/100x50/000/fff'></img></div>
  <div class="art-item"> <img src='https://dummyimage.com/100x100/000/fff'></img></div>
</div>

我相信，如果有一种方法可以强迫art-item继承其包含img的宽度，那么这种情况是可以纠正的.如有任何其他建议，我们将不胜感激.

.art-container { display: flex; flex-wrap: wrap; } .art-item { /* Set to any desired height */ height: 200px; } .art-item > img { /* 100% width and height specifications makes image fill its parent */ width: 100%; height: 100%; object-fit: cover; /* Maintain aspect ratio with full fill */ }

<div class="art-container"> <div class="art-item"> <img src='https://dummyimage.com/100x50/000/fff'> </div> <div class="art-item"> <img src='https://dummyimage.com/100x100/000/fff'> </div> </div>

Html 如何将FlexBox项目zoom 到其包含图像的大小

推荐答案

Html相关问答推荐

使用Scrapy Select 最后一个子文本

CSS位置：固定尊重母公司的保证金属性.""'为什么？

如何使用css实现悬停时的动画zoom ？

CURL邮箱中的图像不能调整其大小

在NzMessageService中传递动态TemplateRef- Angular 15

MatSnackBar： colored颜色不起作用

仅在过渡之前删除填充

使用CSS Flexbox时，我的图像未对齐

浏览器是否可以呈现存储在代码点0x09处的字形？

目标第一个祖先标签的 XPath

30000ms后超时重试：期望找到元素：someElement，但从未找到它

MUI 日期 Select 器要包含的日期

如何在黑暗模式切换中添加图标

在Firefox中使用keySplines时，SVG： <animateMotion>不起作用

白色栏超出页面100%的右侧

视频添加到 Html 与 Github 不同步

我正在使用 NVDA 并多次读取关闭按钮，但它的读取非常完美

如何将元素均匀分布到容器的边缘？

修复 Vue 3 Component 中的 CSS 以显示后面的 Select 器样式而无需！important

为什么 text-align 应用于 span 而不是 CSS 中的 img