loops - div を埋めるためのさまざまな画像の向きでの最小高さ、最小幅

Question

bigcartel アカウントでは、ループを実行する div 内に画像があります。HTML 形式は基本的に次のようになります。

<ul>
  <li class="product">
    <a href="...">
     <img />
     <div class="product_info"></div>
    </a>
  </li>
</ul>

CSS にはたくさんのプリセットコードがありますが、最後にこれを追加して上書きしました。

.product, .product img {
  max-width:210px;
}
.product{
  height:210px;
  overflow:hidden;
}
.product img{
  min-width:210px;
  min-height:210px;
}

オーバーフローが非表示の縦向きの画像ではうまく表示されますが、横向きの画像では幅が狭くなります。水平方向につぶれないようにするために追加できる別のプロパティはありますか?

条件付き CSS JavaScript を使用して実行しようとしましたが、Bigcartel では実行されないようです。URL はhttp://atwatertest.bigcartel.comです。

score 0 · Accepted Answer

max-widthまたはを設定するときはいつでもmin-width、を追加height: autoし、同様にmax/min-heightとを追加しwidth:autoます。これにより、CSS エンジンは画像のサイズを比例的に変更するようになります。

2 に答える 2