寸法を保持したまま画像の伸縮を防止する

Question

画像の伸びを防ぐ方法がありますが、何らかの方法で切り抜いて寸法を保持していますか？

img { 
 
    width: 90px; 
 
    height: 120px; 
 
}

<img src="https://i.pinimg.com/736x/d4/c3/dc/d4c3dc946ae1e087d24def574215e266--image-search-google-search.jpg" alt="">

Answer 1

次の2つのディメンションの1にのみ設定する必要があり、この画像の正確な同じ寸法を維持するために。他の一つは自動的に計算されます。

img { 
 
    width: 90px; 
 
    /*height: 120px;*/ 
 
}

<img src="https://i.pinimg.com/736x/d4/c3/dc/d4c3dc946ae1e087d24def574215e266--image-search-google-search.jpg" alt="">

を私が手伝ったホープ。

Answer 2

あなたがイメージが固定寸法で定義されたコンテナに合うようにしたい場合は、あなたがobject-fit:coverを使用することができます。

div { 
 
    height: 120px; 
 
    width: 90px; 
 
} 
 

 
img { 
 
    height: 100%; 
 
    width: 100%; 
 
    object-fit: cover; 
 
}

<div> 
 
    <img src="https://i.pinimg.com/736x/d4/c3/dc/d4c3dc946ae1e087d24def574215e266--image-search-google-search.jpg" alt=""> 
 
</div>

Answer 3

代わりのwidthとheightを使用しては、max-widthとmax-heightを使用しています。

img { 
    max-width:90px; 
    max-height:120px; 
} 

DEMO