css中可滾動圖像列表的比例調整大小

我有一個水平容器，它包含屏幕的所有寬度以及其中水平溢出的圖像列表。我用高百分比的容器製作了「靈活」容器，並在px中設置了一個限制，以便它不會超過實際圖像高度。我還將圖像的高度設置爲不超過容器高度的100％。css中可滾動圖像列表的比例調整大小

我的問題是當窗口縮小時圖像的行爲。設置html圖像標記中的大小參數時，圖像不是比例的，並且當沒有參數時，圖像會按比例收縮，但是在那裏他們之間有一些差距，他們並沒有在那裏保留「左派理由」。

這似乎很簡單，但我還沒有找到我做錯了什麼。另外它需要是純粹的CSS，沒有JavaScript。

Example on 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; 
}

來源

2013-05-07 bezedy

刪除元素的屬性display:blockli

來源

2013-05-16 12:09:14 Foker

這裏是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個圖像可能會出現。解決方案是使容器能夠容納圖像，使得它們的放置不會分散注意力。

因此，從上面可以看出，當您縮小瀏覽器時，圖像不會以尷尬的方式顯示，但會保持其分辨率變化的一致性，保持其位置相對一致。希望這可以幫助。

來源

2013-05-16 12:27:37 Nitesh

css中可滾動圖像列表的比例調整大小

回答

相關問題