css - 高さから幅のサイズを変更しますか?

Question

1 つ以上の画像のインライン ブロック リストを持つサイトを作成しています。画像は、含まれている div に基づいてサイズ変更する必要がありますが、完全に並べて表示する必要があります。画像は、div 内にあるリスト要素内にあります。

画像の CSS は単純に、height=100% & width=auto です。

画像のサイズは変更されますが、画像が含まれる li 要素は変更されません。これにより、画像が小さくなりますが、リスト要素のために横並びではなくなります。コンテンツのサイズに基づいてリスト要素の幅のサイズを変更したり、高さに基づいてサイズを変更したりするCSSの賢明な方法や方法はありますか?

また、私は本当に JQuery から離れたいと思っています。

コード：

<div id="wrapper" vertical-align="center" class="row">
<ul>
    <li><img height="100%" width="auto" src='@routes.Assets.at("ribbon_left.png")' align="center" onClick='displayText(pin" + i + ")' /></li>
    <li>
@for(p <- pins){
    <div style="position:relative"><img height="100%" width="auto" src='@routes.Assets.at("ribbon_middle.png")' class="pinImage1" align="center" onClick='displayText(pin" + i + ")' /><img height="75%" width="auto" src='@p.image.value.largestImage.get.url' class="pinImage2" align="center" onClick='displayText(pin" + i + ")' /></div></li><li>
}
    <img height="100%" width="auto" src='@routes.Assets.at("ribbon_right.png")' align="center" onClick='displayText(pin" + i + ")' /></li>
</ul>

.row
{
  height: 20%;
  overflow: auto;
  vertical-align: middle;
}

ul
{
  display: inline-block;
  list-style: none outside none;
  white-space: nowrap;
}

li
{
  display: inline-block;
  height: 100%;
  width: auto;
}

pinImage2
{
  left: 8%;
  position: absolute;
  top: 8%;
}

pinImage1
{
  left: 0;
  position: inherit;
  top: 0;
  z-index: 0;
}

例: 1 つ目は最大化された画面で、2 つ目は小さいウィンドウで機能しません。彼らがそのように分離している理由は、画像が小さくなっているのに、li コンテナーがそうではないためです。 まさに何が起こっているのでしょう!