Question

我想创建一个仅限CSS的水平滚动图库，其中包含各种尺寸的图片。在你将它标记为一个dublicate（这个问题经常出现）之前，我做了很多研究，但是找不到任何针对不同图像尺寸的解决方案。

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

Flexbox的
内联块
Peter Biesemans rotation trick

flexbox方法：

＆＃13;

/* 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

＆＃13;

<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>

＆＃13;

...但如果我将图片的height设置为100%，则会在图片后引入大量空白区域，从而打破我整洁的画廊。并且因为图库包装器本身没有绝对尺寸的网格项目，所以我唯一的选择是计算vh中图像的最终高度，这就失去了使用fr的全部目的。我错了，有更简单的方法吗？

较旧的方法是使用inline-block，这基本上存在同样的问题：

＆＃13;

/* 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%;
}

＆＃13;

<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>

＆＃13;

第三个选项只是一个太多的黑客攻击，也不适合移动设备。

对此有什么影响吗？

编辑：图库应具有的功能/属性：

垂直响应：如果浏览器高度降低，则图库的父元素也是如此，因此它应该跟随;
没有最小图像或最大图像高度;如果图像太小，它应该被炸毁;
必须避免水平响应：如果浏览器的宽度发生变化，图像宽度应保持不变（根据宽高比和图像的高度）;

Answer 1

你可以这样做：

＆＃13;

* {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 */
}

＆＃13;

<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>

＆＃13;

CSS只有水平滚动画廊和各种尺寸的图像

1 个答案: