适合对象：包含；根据宽度百分比计算均匀高度？

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

首先这里使用object-fit是没有效果的，因为它只影响<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> 分配一个高度并告诉它们内部的图像尊重它，这仅在图像大于@ 时才有效987654327@ 或 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 get height of screen resolution