图像水平列表的 CSS 以适应浏览器窗口宽度

Question

我的水平图像列表适合浏览器窗口时遇到问题，主要是宽度属性。目前，它们适合完整的浏览器寡妇高度和缩放窗口大小，这就是我想要的。但是宽度会根据寡妇的大小而变化；如果太大，它们会像段落中的文本一样换行；如果太小，容器末端会有大量的空白。请注意，我是一名摄影师，负责管理我自己的网站，从设计到更新，而不是程序员。

在此处链接到我的网站的实际图片库，调整浏览器窗口的大小以查看我遇到的问题： http://djonathanhutchings.com/NEWTEST/black&white.html

是否有 css 编码可以允许宽度作为高度，在调整大小时适合浏览器窗口，但是容器的实际宽度并且不会导致空白/负空间或换行？我假设为容器 div 设置样式？

提前感谢您的帮助！

我的代码：

    	body {
    	  margin: 0;
    	  padding: 0;
    	}
    	#container {
    	  position: absolute;
    	}
    	#images_hz {
    	  width: 12584px;
    	  border: 0;
    	  padding: 0;
    	  overflow: hidden;
    	}
    	#images_hz img {
    	  height: 100vh;
    	  display: inline;
    	  float: left;
    	}
    	img {
    	  pointer-events: none;
    	}
    	

<div class="container" />
<div id="images_hz">
  <img src="fashionb&w/1Ashten_7.jpg" />
  <img src="fashionb&w/2Ashten_13.jpg" />
  <img src="fashionb&w/3Ashten_6.jpg" />
  <img src="fashionb&w/4blacktank3.jpg" />
  <img src="fashionb&w/5blacktank2.jpg" />
  <img src="fashionb&w/6blacktank1.jpg" />
  <img src="fashionb&w/7blacktank5.jpg" />
  <img src="fashionb&w/8blacktank4.jpg" />
  <img src="fashionb&w/9katelyn1.jpg" />
  <img src="fashionb&w/10katelyn2.jpg" />
  <img src="fashionb&w/11jillian2.jpg" />
  <img src="fashionb&w/12jillian1.jpg" />
  <img src="fashionb&w/13jenny6.jpg" />
  <img src="fashionb&w/14anger4.jpg" />
  <img src="fashionb&w/15anger3.jpg" />
  <img src="fashionb&w/16ona.jpg" />
</div>

Answer 1

将#images_hz 和#images_hz img 更改为以下内容：

#images_hz {
    height: 100vh;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    border: 0;
    padding: 0;
}

#images_hz img {
    height: 100vh;
    display: inline-block;
    margin-right: -4px /* one possible hack to use if you want no white space between inline block elements */
}

除了设置高度之外，主要更改还包括在容器上设置适当的 x 和 y 溢出。此外，消除浮动并将显示更改为图像本身的内联块。请注意，我使用了一个修复程序来消除图像之间的空白，以与当前设计保持一致。有关其他替代方案，请参阅https://css-tricks.com/fighting-the-space-between-inline-block-elements/