html - 用于水平图像列表的 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 溢出。此外，消除 float 并将显示更改为图像本身的内联 block 。请注意，我使用了一个修复程序来消除图像之间的空白，以与当前设计保持一致。有关其他替代方案，请参阅 https://css-tricks.com/fighting-the-space-between-inline-block-elements/