对象拟合:包含;根据宽度百分比%计算均匀高度

Question

我正在尝试确定object-fit: contain;在仅提供宽度百分比时是否可以处理多个图像。我希望所有的<img>都是相同的可视高度，与纵横比相对应，并认为给定max-width: 5%;会强制指定隐含的高度。我愿意使用flexbox，尽管当我尝试使用它时，我也遇到了同样的问题。在下面的图中，第二张li图片("curry_2.jpg"(收缩，但不正确。

div.imgbox {
width: 100%
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul li {
float: left;
max-width: 5%;
height: 100%;
}
ul li img {
width: 100%;
height: 100%;
object-fit: contain;

<div class="imgbox">
<ul class="imgs">
<li><img src="https://web.archive.org/web/20010806195135im_/http://rubberburner.com:80/curry_1.jpg"></li>
<li><img src="https://web.archive.org/web/20010806195628im_/http://rubberburner.com:80/curry_2.jpg"></li>
<!-- The above image, "curry_2.jpg" shrinks but not correctly -->
<li><img src="https://web.archive.org/web/20010806194159im_/http://rubberburner.com:80/all_curry1.jpg"></li>
</ul>
</div>

编辑

我不知道为什么，但使用height: vw可以按照我想要的方式工作，保持行稳定。height: vh也可以，但它允许图像在页面调整时翻滚，从而显示为多行。

ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
ul li {
	float: left;
	height: 10vw; /* height using vW... not vH? */
}
.imgs img {
	max-height: 100%;
	object-fit: contain;
}

	<div class="imgbox">
		<ul class="imgs">
			<li><img src="https://web.archive.org/web/20010806195135im_/http://rubberburner.com:80/curry_1.jpg"></li>
			<li><img src="https://web.archive.org/web/20010806195628im_/http://rubberburner.com:80/curry_2.jpg"></li>
			<!-- The above image, "curry_2.jpg" shrinks -->
			<li><img src="https://web.archive.org/web/20010806194159im_/http://rubberburner.com:80/all_curry1.jpg"></li>
		</ul>
	</div>

Answer 1

首先，使用对象拟合在这里没有效果，因为它只影响<img>内容框内的图像，也就是说，如果我们更改框的高度/宽度，那么它就会产生效果。

img {
width: 200px;
height: 200px;
border: 1px solid red;
animation: object 5s linear alternate infinite;
}
.helper:before {
content: '';
position: absolute;
animation: content 5s linear alternate infinite;
}
@keyframes content {
0% {
content: 'fill';
}
25% {
content: 'cover';
}
50% {
content: 'contain';
}
75% {
content: 'none';
}
100% {
content: 'scale-down';
}
}
@keyframes object {
0% {
object-fit: fill;
}
25% {
object-fit: cover;
}
50% {
object-fit: contain;
}
75% {
object-fit: none;
}
100% {
object-fit: scale-down;
}
}

<div class="helper">
<img src="https://via.placeholder.com/120x150">
</div>

---

其次，这不是vh或vw，你只是给所有<li>指定一个高度，并告诉它们内部的图像要尊重它，只有当图像大于vh或vw的评估值时，这才有效。

假设我们有一个高度小于10vw的图像，那么所有图像的可视高度不再相同

ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul li {
float: left;
height: 10vw;
border: 1px solid red;
}
.imgs img {
max-height: 100%;
}

<div class="imgbox">
<ul class="imgs">
<li><img src="https://via.placeholder.com/150x10"></li>
<li><img src="https://via.placeholder.com/160x40"></li>
</ul>
</div>

---

由于您想要相同的可视高度，然后应用固定的高度，因此纵横比将被保留，因为我们只应用高度，如果您同时应用宽度和高度，那么您基本上就是在定义一个新的纵横比。

ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul li {
float: left;
}
.imgs img {
/* same viewable height and a solid row*/
height: 100px;
border: 1px solid red;
}

<div class="imgbox">
<ul class="imgs">
<li><img src="https://via.placeholder.com/180x120"></li>
<li><img src="https://via.placeholder.com/80x40"></li>
</ul>
</div>

Answer 2

我认为高度100%没有任何意义，因为页面可以有它想要的高度。我认为你的意思是一开始就占据整个屏幕的高度，因为尝试像100vh这样的东西，即

ul li {
float: left;
max-width: 5%;
height: 100vh
}
ul li img {
width: 100%;
height: 100vh
object-fit: contain;
}

或者使用Javascript，将高度设置为某个变量，然后可以使用百分比相应地降低/调整高度

你可以在这里阅读更多关于

css获取屏幕分辨率的高度