レスポンシブルイメージを水平方向にスケーリングするだけです

Question

私はウェブサイト上で作業しています。イメージ（imgタグ）は水平方向にのみスケールします。だから、常に完全な高さを取らなければならない。また、画面を調整するときは中央に留まり、左右の面を切り取る必要があります。そして、イメージを「伸ばす」ことなく。例えば

（それはスライダーでの大きな左の画像です）：

http://reddle.nl/frankendael/beers/t-i-t-s/

私は常にフルビール瓶を表示できるようにしたいです。

Answer 1

img { 
    height: auto; 
    max-width: 100%; 
} 

Answer 2

これを試してください。

.vc_inner { 
    height: 100%; 
} 
.attachment-full { 
    height: 100%; 
    width: 100%; 
} 

あなたはすべての画面に合うたい場合は、使用分の高さや、最大高さ

Answer 3

あなたはwidth:100%とoveflow:hiddenとdivの中にあなたの画像を埋め込む必要があります。イメージにはサイズが含まれている必要があります。また、divにはイメージと同じ高さが必要です。

Answer 4

これを行うにはいくつかの方法があります。あなたが可能なすべての詳細、または任意のコードを与えていなかったので、私は、これはあなたが望むものを達成かもしれないと推測している：

body { 
 
    margin: 0; padding: 0; 
 
} 
 

 
.container { 
 
    width: 40%; 
 
    height: 100vh; 
 
    
 
    overflow: hidden; 
 
    
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    
 
    /* just to show the container for testing */ 
 
    box-shadow: 2px 2px black; 
 
} 
 

 
img { 
 
    height: 100%; 
 
}

<div class='container'> 
 
    <img src='https://source.unsplash.com/random/800x1000/daily'> 
 
</div>

が、私はこの使用して、フレックスボックスを行うことを選びました、コンテナ全体の高さを与え、その内容（画像）中心/中心を表示し、画像の高さを100％にすることによって、これは、ボックスが小さすぎる場合は側面を切り抜き、ボックスが大きすぎる場合は空白を追加します。

ライブバージョンat this CodePenが表示されます。それを行う他の方法がありますが、これはかなりきれいでよくサポートされています。

幸い！これがあなたの望むものでない場合は、あなたの質問をもっと明確に更新してください。