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/

适用于浏览器窗口宽度

1 个答案: