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

我认为高度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

Answer 2

首先，在这里使用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>分配了高度，并告诉其中的图像尊重它，只有当图片也比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>

由于您希望具有相同的可见高度，然后应用固定的高度，因此纵横比将被保留，因为我们仅应用高度，如果同时应用width和height，则基本上是在定义新的纵横比。 / p>

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>

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

2 个答案: