0

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

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

看起来很简单，但我还没有发现我做错了什么。它还需要是纯 css，没有 javascript。

JSFIDDLE 上的示例

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;
}
4

2 回答 2

0

移除display:block元素的属性li

于 2013-05-16T12:09:14.777 回答
0

Here is the Solution.

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

The 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;
    }

Scenario

The issue is that the images can be of any width or height and also of n number of images may come. The solution is to make the container such that it accommodates images in such a way that their placement doesnt get distraction.

So from the above, you can see that when you shrink the browser, the images are not displayed in an awkward manner, but maintains its consistency across changes in the resolution keeping their position relatively consistent. Hope this helps.

于 2013-05-16T12:27:37.070 回答