設定された高さのレスポンシブな画像デザイン

Question

レスポンシブな画像に少しでも問題がある場合は、誰か助けてくれますか？

私は自分のイメージを高くしたいです。 200pxであり、容器の幅の約100％である。それは画像が伸びて見栄えが悪いという問題を引き起こします。私は、イメージをその比率を維持して、まだよく見えるようにすることができれば、私が創り出したものである。設定された高さでその周りにコンテナを置いて、オーバーフローが上と下のすべての事の背後に隠れるようにすることができますか？それをどうやって最も簡単な方法ですか？私はこの問題を解決することができますどのように

その他のsugestions？

Answer 1

この問題を解決する方法は間違っています。 heightとwidthの両方に制約を設定して、イメージの縦横比を維持することはできません。

この場合のように、このCSSを考えてみます。

img { 
    height: 200px; 
    width: auto; 
} 

Answer 2

は、私は通常、このような状況のために使用background-sizeと呼ばれるCSSの属性があります。 とbackground-positionを組み合わせると、あなたが探しているものになる可能性があります。以下の例。

body { 
 
    margin: 0; 
 
    background-color: #CCCCCC; 
 
} 
 

 
.container { 
 
    width: 500px; 
 
    margin: 15px auto; 
 
    padding: 15px; 
 
    background-color: #FFFFFF; 
 
} 
 

 
.hero { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-image: url('http://www.redcross.org/images/MEDIA_CustomProductCatalog/m17844381_TheHero_763x260_PRE.JPG'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="hero"></div> 
 
    <div class="content"> 
 
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p> 
 
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p> 
 
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p> 
 
    </div> 
 
</div>

私の例では「英雄」の画像は763x260pxあり、それがに表示されているコンテナのdivが470x200pxですが、それはまだそれのコンテナへの「最良の方法」に収まります。

Answer 3

background-size:cover