使用列表的固定高度画廊 - 不同的纵横比

Question

我正在使用 HTML 和 CSS 在 Wordpress 中创建一个图片库，以使用滚动条并排显示具有不同纵横比的多个图像。我希望他们保持不同宽度的容器的高度。

画廊是使用列表创建的并排显示它们。

我认为这是最好的选择，但我在调整图像尺寸以使其高度一致时遇到困难。

HTML 下面 & CSS 再往下

<div class="image-cont"><ul><li class="vt-image"><img 
src="https://standleyonline.com/wp-
content/uploads/2017/09/fullsizerender3.jpg"></img></li><li class="vt-image">
<img src="https://standleyonline.com/wp-
content/uploads/2017/09/fullsizerender1.jpg"><img></li><li class="hz-image">
<img src="https://standleyonline.com/wp-
content/uploads/2017/09/standley3910.jpg"></img></li><li class="vt-image"><img 
src="https://standleyonline.com/wp-
content/uploads/2017/09/fullsizerender1.jpg"><img></li></ul></div>

CSS

.image-cont div {
max-width: 100%;
overflow: auto;
white-space: nowrap;
overflow-x: scroll;
}

 .image-cont ul {
    overflow: auto;
white-space: nowrap;
}

.image-cont li {
max-width: 33vw;
list-style: none;
display: inline-block;
}

.image-cont img {
max-height: 100%;
clear:both;
}

Answer 1

尝试下面的 css 使用 object-fit:

.image-cont div {
  max-width: 100%;
  overflow: auto;
  white-space: nowrap;
  overflow-x: scroll;
}

.image-cont ul {
   overflow: auto;
   white-space: nowrap;
   height:400px;
}

.image-cont li {
  display:inline-block;
  height:100%;
  list-style: none;
}

.image-cont img {
  height:100%;
  object-fit:contain;
}

使用列表的固定高度画廊 - 不同的纵横比

Fixed height gallery using a list - varying aspect ratios

html

css

wordpress

gallery