pinterestと同じように画像をdiv内に収めるには良い方法はありますか？

Question

基本的には、単純なもののように：

<div class="container"> 
    <img src="something.jpg" class="image"> 
    <div class="well">Title</div> 
</div> 

IMGは、例えば400ピクセルのようなのMAX-高さができれば（私はPinterestのは彼らが本当によく合う作ると思います）、どのようにあなたはそれが恐ろしく自体を圧縮しないで作るのですか？

.image { 
    width: 100%; 
    max-height: 300px; 
    height: 100%; 
} 

Answer 1

「100％」に設定する必要があります。もう1つは「自動」に設定すると画像の割合が維持されます。

HTML：

<div class="container"> 
    <img src="xxx.jpg" class="image"> 
</div> 
<div class="well">Title</div> 

CSS：あなたがコントロールの背景サイズのため、簡単に背景画像のプロパティを使用することができます

.container { 
    height:400px; 
    width:100%; 
    overflow: hidden; 
    text-align: center; 
} 
.image { 
    width: auto; 
    height: 100%; 
} 

別の方法。

HTML：

<div class="container"></div> 
    <div class="well">Title</div> 

CSS：

.container { 
     height:400px; 
     width:100%; 
     background-image: url("xxx.jpg"); 
     background-size: cover; 
     background-position: center; 
    }