Question

我有一个水平容器，它占据了屏幕的所有宽度，并且有一个水平容器溢出的图像列表。我使容器“灵活”，高度为百分比，并设置px限制，使其不会超过实际图像高度。我还将图像的高度设置为不超过容器高度的100％。

我的问题是当窗口缩小时图像的行为。当设置html图像标签中的尺寸参数时，图像不是按比例的，当没有参数时，图像按比例缩小，但它们之间存在一些间隙，并且它们不会保持“左对齐”。

看起来很简单，但我没有找到我做错的事。它也需要是纯粹的CSS，没有javascript。

HTML：

<nav>
  <ul class="clearfix">
    <li>
      <a href="">
        <img width="100" height="150" src="http://placekitten.com/100/150" alt="">
      </a>
    </li>

    <li>
      <a href="">
        <img src="http://placekitten.com/g/100/150" alt="">
      </a>
    </li>
    ...
  </ul>
</nav>

CSS：

* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
nav {
  width: 100%;
  overflow: hidden;
  overflow-x: scroll;
  height: 40%;
  max-height: 150px;
  background-color: white;
}
ul {
  display: block;
  width: 1200px;
  height: 100%;
  background-color: yellow;
}
li {
 list-style: none;
 display: block;
 float: left;
}
a {
  display: block;
  background-color: tomato;
}
img {
  max-height: 100%;
  width: auto;
}

Answer 1

删除元素display:block

的属性li

Answer 2

这是Solution。

HTML：

<div id="container">
    <div><img src="http://placekitten.com/100/150"></div>
    <div><img src="http://placekitten.com/100/150"></div>
    <div><img src="http://placekitten.com/100/150"></div>
    <div><img src="http://placekitten.com/100/150"></div>
</div>

CSS：

#container {
    border: 10px solid black;
    font-size: 0.1px;
    height: 150px;
    min-width: 600px;
    overflow: hidden;
    text-align: justify;
}
    #container div {
    width: 150px;
    height: 125px;
    display: inline-block;
    }
    #container:after {
    content: '';
    width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
    display: inline-block;
    }

<强>方案

问题是图像可以是任何宽度或高度，也可以是n个图像。解决方案是使容器成为容纳图像的方式，使得它们的放置不会分散注意力。

因此，从上面可以看出，缩小浏览器时，图像不会以笨拙的方式显示，而是保持其在分辨率变化中的一致性，保持其位置相对一致。希望这会有所帮助。

在css中按比例调整可滚动图像列表的大小

2 个答案: