Question

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

使用列表创建图库以并排显示它们。

我认为这是最好的选择，但我在操作图像尺寸方面遇到了困难，因此它们的高度一致。

HTML低于＆amp; 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

使用object-fit：

尝试下面的css

.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;
}

固定高度图库使用列表 - 不同的宽高比

1 个答案: