仅 CSS 水平滚动画廊，带有各种尺寸的图像

Question

我正在尝试创建一个仅使用 CSS 的水平滚动画廊，其中包含各种尺寸的图像。在您将此标记为重复之前(这个问题经常弹出)，我确实做了很多研究，但还没有找到针对不同图像尺寸的任何解决方案。

到目前为止，我的解决方案是:

1. flex 盒子
2. 行内 block
3. > Peter Biesemans rotation trick

flex 盒方法:

/* setting up the site */
* {
	margin: 0;
	padding: 0;
}
body {
	height: 100vh;
	width: 100vw;
	display: grid;
	grid-template-columns: 1fr 8fr 1fr;
	grid-template-rows: 1fr 8fr 1fr;
	grid-template-areas: 
		".    .    ."
		".	 wrap  ."
		".    .    .";
}
#wrapper {
	grid-area: wrap;
	overflow-x: auto;
	overflow-y: hidden;
}
#wrapper ul {list-style: none;}

/* try using flexbox */
#wrapper ul {
	display: flex;
    flex-direction: row;
	flex-wrap: nowrap;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar; /*suggestion from https://iamsteve.me/blog/entry/using-flexbox-for-horizontal-scrolling-navigation*/
	height: 100%;
}
#wrapper ul li {
	height: 100%;
	flex:0 0 auto;
}
#wrapper ul li img {height: 100%;} /*<-- breaks the thing

<div id="wrapper">
	<ul>
		<li><a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a></li>
		<li><a href="https://placeholder.com"><img src="http://via.placeholder.com/2000x1500"></a></li>
		<li><a href="https://placeholder.com"><img src="http://via.placeholder.com/800x1800"></a></li>
		<li><a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a></li>
		<li><a href="https://placeholder.com"><img src="http://via.placeholder.com/2000x1500"></a></li>
		<li><a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a></li>
	</ul>
</div>

...但是如果我将图像的高度设置为100%，它会在图像后引入大量空白，从而破坏我整洁的图库。而且因为画廊包装器本身是一个没有绝对尺寸的网格元素，所以我唯一的选择是计算 vh 中图像的最终高度，这违背了使用 的全部目的FR。我错了吗？还有更简单的方法吗？

旧的方法是使用 inline-block，它有基本相同的问题:

/* setting site up */
* {
	margin: 0;
	padding: 0;
}

body {
	height: 100vh;
	width: 100vw;
	display: grid;
	grid-template-columns: 1fr 8fr 1fr;
	grid-template-rows: 1fr 8fr 1fr;
	grid-template-areas: 
		".    .    ."
		".	 wrap  ."
		".    .    .";
}
#wrapper {
	grid-area: wrap;
	overflow-x: auto;
	overflow-y: hidden;
}
#wrapper ul {list-style: none;}

/* trying inline-block */
#wrapper ul {
	height: 100%;
	display: block;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
}
#wrapper ul li {
	display: inline-block;
	height: 100%;
}
#wrapper ul li img {
	height: 100%;
}

<div id="wrapper">
	<ul>
		<li><a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a></li>
		<li><a href="https://placeholder.com"><img src="http://via.placeholder.com/2000x1500"></a></li>
		<li><a href="https://placeholder.com"><img src="http://via.placeholder.com/800x1800"></a></li>
		<li><a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a></li>
		<li><a href="https://placeholder.com"><img src="http://via.placeholder.com/2000x1500"></a></li>
		<li><a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a></li>
	</ul>
</div>

第三个选项有点太过分了，也不适合移动设备。

那么有解决办法吗？

编辑:图库应具备的特性/属性:

• 垂直响应:如果浏览器高度降低，图库的父元素也会随之降低；
• 没有最小或最大图像高度；如果图片太小，应该放大；
• 必须避免水平响应:如果浏览器的宽度发生变化，图像宽度应保持不变(根据图像的纵横比和高度)；

Answer 1

你可以这样做:

* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}

#wrapper {
  display: flex;
  justify-content: center; /* horizontal alignment / centering of the ul */
  width: 1000px; /* for presentation */
  max-width: 100%; /* responsiveness */
  margin: 0 auto; /* horizontal alignment / centering on the page */
}

#wrapper > ul {
  list-style: none;
  display: flex;
  overflow: auto; /* better this way */
  overflow-y: hidden; /* appears just a little, don't know why (yet), needs to be set to hide it and make it look nicer */
  max-height: 100vh;
}

#wrapper > ul > li {
  height: 150px; /* needs to match the height of the "shortest" img or be less than that but not more */
  flex: 0 0 auto; /* mandatory */
  max-height: 100vh;
}

img { /* responsiveness */
  display: block; /* to remove the bottom margin */
  height: 100vh;
  max-width: 100%;
  max-height: 100%; /* mandatory */
}

<div id="wrapper">
  <ul>
    <li><a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a></li>
    <li><a href="https://placeholder.com"><img src="http://via.placeholder.com/2000x1500"></a></li>
    <li><a href="https://placeholder.com"><img src="http://via.placeholder.com/800x1800"></a></li>
    <li><a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a></li>
    <li><a href="https://placeholder.com"><img src="http://via.placeholder.com/2000x1500"></a></li>
    <li><a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a></li>
  </ul>
</div>