6

バナー内の画像が親の高さを下回らず、画像の比率を維持するための純粋な CSS ソリューションがあるかどうかを調べようとしています。

ここでデモを見ることができます: http://jsfiddle.net/LkxYU/1/

html:

<div class="banner_holder">
    <img src="http://placekitten.com/g/800/600"/>    
</div>

CSS:

.banner_holder{
    width: 100%;
    height: 300px;
    min-height: 200px;
    position: relative;
    outline:1px dotted red;
}

.banner_holder img{
    width: 100%;
}

私の目標は、画像を常に 100% にすることですが、高さが 300px を下回らないようにすることです。これは画像のカットオフを意味しますが、それで問題ありません。純粋な CSS ソリューションがあるかどうか、または jQuery を使用する必要があるかどうかを知りたいだけです。

4

4 に答える 4

22

< img > タグを使用する代わりに、その画像を div の背景画像にし、次のスタイルを指定しました。

.banner_holderImage{
    height: 100%;
    position:relative;
    background:   url("http://placekitten.com/g/800/600")no-repeat;
    background-size: cover;
    background-position: center;
}

ここに私が使用していたフィドルがあります：http://jsfiddle.net/MathiasaurusRex/LkxYU/4/

完全な HTML と CSS は次のとおりです。

<div class="banner_holder">
    <div class="banner_holderImage"></div>  
</div>

--

.banner_holder{
    width: 100%;
    height: 300px;
    min-height: 200px;
    position: relative;
    outline:1px dotted red;
}

.banner_holderImage{
    height: 100%;
    position:relative;
    background:   url("http://placekitten.com/g/800/600")no-repeat;
    background-size: cover;
    background-position: center;
}
于 2013-11-04T23:40:59.153 に答える
1

画面サイズによっては、必然的に画像の比率がずれます。背景画像を試してみませんか。

.banner_holder{
  width: 100%;
  height: 300px;
  min-height: 200px;
  position: relative;
  outline:1px dotted red;
  background: url('http://placekitten.com/g/800/600') center no-repeat;
  background-size: cover;
}

または、イメージタグに最大高さを追加することもできます:

.banner_holder img{
  width: 100%;
  max-height: 300px;
}
于 2013-11-04T23:41:02.403 に答える