ストレッチ画像なしのCSS ScaleY

Question

画像のリストを表示する必要がありますが、それらの多くに縦横比があるので、画像をより小さく、伸ばしずに表示できるようにしたいと思います。また、ユーザーそれらをクリックすると拡張されます... max-heightを変更することができましたが、携帯電話のtransitionは非常に悪いので、transformとscaleYを使用してパフォーマンスを改善します。問題は、画像が伸びてしまうことです。例えば

これは通常の画像の場合：

私はそれがこのように見えるようにしたい、伸び：

、ユーザーがそれをクリックしますイメージは初期状態に戻ります。

CSS

.card img, .card video{ 
width: 100%; 
vertical-align: middle; 
border-radius:2px; 
object-fit:cover; 
will-change: max-height,height; 
transition: max-height 0.4s ease; 
} 

HTML

<div class="card"> 
     <div> 
      <img src="image.jpg"/> 
     </div> 
    </div> 

そしてJavaScriptで私は単にonclickイベントにimgのmaxHeightを設定します。

これは私の現在のコードです。

ありがとうございました！ここで

Answer 1

は私のコード

.image_container img { 
margin: 0 auto; 
object-fit: cover; 
position: absolute; 
top: 54%; 
left: 50%; 
width: auto; 
height: auto; 
max-height: none; 
max-width: none; 
min-height: 100%; 
min-width: 100%; 
-webkit-transform: translate(-50%, -50%); 
vertical-align: middle; 
}