伸ばしずに画像に高さを与える方法

Question

非常に高い解像度の画像があります。 幅を100％に設定しても問題ありません。唯一の問題は、その高さが大きすぎると、画像を伸ばしずに高さを与えることができないということです。ここで

私のHTML：

<div class="container"> 
    <div class="image"> 
    <img src="Post1.jpg" alt=""> 
    </div> 
</div> 

CSS：

.div{ 
    max-height:500px 
} 
img{ 
    width:100%; 
    height:auto; 
    max-height:100%; 
} 

がどのように画像を引き伸ばすことなく、それを適切な高さを与えることができますか？

Answer 1

内側divの代わりにthis....イメージを試すことができます。幅を100％にする必要がある場合は、

.sq1 { 
 
    height : 300px;width:300px; 
 
    background-color:#eee;position:fixed; 
 
} 
 

 
.sq2{ 
 
    height:200px;width:200px; 
 
    background-color:#000;margin:50px auto; 
 
}

<div class="sq1"> 
 
    <div class="sq2"></div> 
 
</div>

Answer 2

/* css */ 
    div{ 
     height:500px; 
     width: 100%; 
    } 
    img{ 
     width: auto; 
     height: auto; 
    } 

<!-- HTML --> 
<div class="container"> 
    <div class="image"> 
    <img src="Post1.jpg" alt=""> 
    </div> 
</div> 

Answer 3

[OK]を、あなたのコード内のいくつかの欠陥があります。

1. .divセレクタは、class = "div"のものをすべて選択します。 .containerセレクタを使用したい場合
2. max-heightを閉じることを忘れた場合：500px;
3. 最後に、あなたの質問に答えます。あなたの画像はまだ元のサイズで表示されます。これはオーバーフローを設定していないためです：隠されています。この行を追加すると、画像は.container divの外側に表示されません。

できるだけ元の投稿に近づけようとしました。望ましくない結果を招く可能性のある画像の一部を切り捨てていることに注意してください。仕事をするだろうwidth`と `height`自動

HTML

<div class="container"> 
    <div class="image"> 
    <img src="Post1.jpg" alt=""> 
    </div> 
</div> 

CSS

.container{ 
    max-height:500px; 
    overflow: hidden; 
} 
img{ 
    width:100%; 
}