私は、指定された幅と高さで画像を表示できるシンプルなCSSを持っています。イメージの高さを幅以上に置くと、簡単にボックスを埋めることができます。しかし、私はより多くの幅とより低い高さを持つ画像をアップロードします。画像の下の部分は空いているか空のままです。オーバーフローを隠して空のスペースに色を塗りつぶす方法は？
下の画像に黒い円で記された空欄を記入してください。どんな方法でも行います。
CSS
.container4 {
width: 9.5em;
overflow: scroll;
height: 10em;
}
.container4 img {
width: 100%;
}
background-size: cover;はあなたのための有用な特性です。 http://jsfiddle.net/uTHqs/
高さを100％に設定して幅を設定しないと、フレーム全体が塗りつぶされますが、画像がカットされます。そうでなければ、画像をタイルすることができます。
背の高いイメージの場合はどうなりますか？ – kpie
それから高さを埋めるでしょうが、あなたは余裕があるかもしれません。あなたが何かで背景を埋めるために探しているならば。背景色と背景画像の両方を持つことができ、残りの部分を色で塗りつぶします。 – amaclean
それでは、空白がないことを保証する答えは、CSSの背景とbackground-size：coverを使用することです。画像全体が確実に表示されるようにするには、代わりにcontainsを使用します。 http://www.w3schools.com/cssreF/css3_pr_background-size.asp – kpie
画像を伸ばしたいですか？ –
add background-color：transparent;コンテナへ –
あなたの画像に 'height：* your container height *'を追加してみませんか？しかし、写真は伸ばされます。 – user3771102