html - css のスクロール可能な画像リストの比例リサイズ

Question

画面の幅全体を占める水平コンテナと、水平方向にオーバーフローする画像のリストがあります。高さをパーセンテージで指定してコンテナーを「柔軟」にし、実際の画像の高さを超えないように制限を px に設定しました。また、画像の高さをコンテナの高さの 100% 以下に設定しました。

私の問題は、ウィンドウが縮小されているときの画像の動作です.html画像タグのサイズパラメーターが設定されている場合、画像は比例しません.パラメーターがない場合、画像は比例して縮小しますが、それらの間にいくつかのギャップがあります.そして、彼らはそこに「左揃え」を保持しません。

それは十分に単純に思えますが、私が間違っていることを見つけていません。また、javascript ではなく、純粋な css である必要があります。

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

Answer 1

これが解決策です。

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 個の画像が表示される可能性があることです。解決策は、配置が邪魔にならないように画像を収容できるようにコンテナーを作成することです。

上記から、ブラウザを縮小すると、画像が不自然に表示されることはなく、解像度が変化しても画像の一貫性が維持され、位置が比較的一貫していることがわかります。お役に立てれば。

Answer 2

display:block要素のプロパティを削除li