もう1つの、おそらく非効率的な解決策は、img要素をvisibility: hidden;に設定して画像を含めることです。それから周囲のdivのbackground-imageを画像と同じにします。
これは周囲のdivをimg要素の画像のサイズに設定しますが、背景として表示します。
<div style="background-image: url(http://your-image.jpg);">
<img src="http://your-image.jpg" style="visibility: hidden;" />
</div>
背景画像をimg要素のように機能させるとても素敵でクールな方法があるので、自動的にheightを調整します。画像のwidthとheightの比率を知る必要があります。コンテナーのheightを0に設定し、padding-topをイメージ比率に基づくパーセンテージとして設定します。
次のようになります。
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
あなたはちょうどimg要素のように働くだろう自動高さの背景画像を手に入れた。これが実用的なプロトタイプです（divの高さを変更して確認できます）： http://jsfiddle.net/TPEFn/2/
CSSを使用して背景画像のサイズを自動調整する方法はありません。
他の人が言ったように、サーバー上の背景画像を測定してdivにそれらの属性を適用することでそれを回避することができます。
画像のサイズに基づいてdivのサイズを変更するためのJavaScriptをハックすることもできます（画像がダウンロードされたら） - これは基本的に同じことです。
あなたがあなたのdivが画像を自動調整するのを必要とするならば、私はなぜあなたがあなたのdivの中に単に<img>タグを入れないのか尋ねるかもしれません？
この答えは他のものと似ていますが、ほとんどのアプリケーションには全体的に最適です。あなたは通常あなたがする前に画像サイズを知る必要があります。これにより、ネガティブパディングや画像の絶対位置を指定せずに、オーバーレイテキスト、タイトルなどを追加できます。これらのキーは、以下の例に見られるように画像の縦横比と一致するようにパディング％を設定することです。私は この答え を使い、基本的には単に画像の背景を追加しました。
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
background-size: contain;
background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
margin: 0 auto;
}
.wrapper:after {
padding-top: 75%;
/* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
color: black;
text-align: center;
margin-top: 5%;
}<div class="wrapper">
<div class="main">
This is where your overlay content goes, titles, text, buttons, etc.
</div>
</div>多分これは助けになるかもしれません、それは正確に背景ではありません、しかしあなたは考えを得ます：
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
<div>Hi there</div>
</div>
これがここでずっと見られないことを確かに確かめてください。しかし、あなたの問題が私のものと同じであれば、これが私の解決策でした：
.imaged-container{
background-image:url('<%= asset_path("landing-page.png") %> ');
background-repeat: no-repeat;
background-size: 100%;
height: 65vw;
}
画像の中央にdivを付けたいのですが、これで可能になります。
他の答えが見逃していた純粋なCSSソリューションがあります。
"content："プロパティはテキストコンテンツを要素に挿入するために主に使用されますが、画像コンテンツを挿入するためにも使用できます。
.my-div:before {
content: url("image.png");
}
これによりdivは高さを画像の実際のピクセルサイズに変更します。幅も変更するには、以下を追加します。
.my-div {
display: inline-block;
}
私はこの問題を抱えていてHasanaviの答えを見つけましたが、ワイドスクリーンに背景画像を表示するときにちょっとしたバグがありました - 背景画像がスクリーンの幅いっぱいに広がっていませんでした。
だからここに私の解決策があります - Hasanaviのコードに基づいていますがもっといいのですが…そしてこれはエクストラワイドとモバイルの両方のスクリーンで動作するはずです。
/*WIDE SCREEN SUPPORT*/
@media screen and (min-width: 769px) {
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
}
/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
}
お気づきかもしれませんが、background-size: contain;プロパティは特別なワイドスクリーンには適していません。また、background-size: cover;プロパティはモバイル画面には適していません。そのため、私はこの@media属性を使用して画面サイズを調整し、この問題を解決します。
あなたはサーバーサイドでそれをすることができます：それからイメージを測定してそれからdivサイズをセットすることによって、JSでイメージをロードすること、OR、それの属性を読んで、それからDIVサイズをセットする。
そして、これがアイデアです。IMGタグと同じ画像をdivの内側に配置しますが、可視性を与えます。位置+相対位置で再生+このdivに背景として画像を追加します。
これはどう ：）
.fixed-centered-covers-entire-page{
margin:auto;
background-image: url('https://i.imgur.com/Ljd0YBi.jpg');
background-repeat: no-repeat;background-size:cover;
background-position: 50%;
background-color: #fff;
left:0;
right:0;
top:0;
bottom:0;
z-index:-1;
position:fixed;
}<div class="fixed-centered-covers-entire-page"></div>それが単一の所定の背景画像であり、背景画像の縦横比を歪めずにdivを反応させたい場合は、まず画像の縦横比を計算してから、次のようにして縦横比を維持するdivを作成できます：
アスペクト比4/1が必要で、divの幅が32％であるとします。
div {
width: 32%;
padding-bottom: 8%;
}
これは、パディングが包含エレメントの幅に基づいて計算されるという事実に起因します。
あなたはそのようなことをすることができます
<div style="background-image: url(http://your-image.jpg); position:relative;">
<img src="http://your-image.jpg" style="opacity: 0;" />
<div style="position: absolute;top: 0;width: 100%;height: 100%;">my content goes here</div>
</div>
これは助けになるかもしれません、それは正確な背景ではありませんが、あなたは単純な考えを得る
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
<div>Hello</div>
</div>
Umbraco CMSでこの問題が発生した場合、このシナリオではdivの 'style'属性に次のようなものを使用してdivにイメージを追加できます。
style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"
私が考えることができる最善の解決策は、幅と高さをパーセントで指定することです。これにより、モニタサイズに基づいて画面をサイズ変更できます。レスポンシブレイアウトの詳細.
例えば。あなたが持っている
<br/>
<div> . //This you set the width percent to %100
<div> //This you set the width percent to any amount . if you put it by 50% , it will be half
</div>
</div>
あなたがレスポンシブレイアウトを望むならば、これは最良の選択です、私はフロートを使うことをお勧めしません、特定のケースではフロートは大丈夫です。しかしほとんどの場合、クロスブラウザテストをしているときには多くのことに影響を与えるので、floatの使用は避けます。
お役に立てれば ：）
私はしばらくこの問題を扱ってきたので、この問題を解決するためにjqueryプラグインを書くことにしました。このプラグインはクラス "show-bg"を持つすべての要素を見つけ（あるいはあなた自身のセレクターを渡して）、それらの背景画像の寸法を計算します。あなたがしなければならないのはこのコードをインクルードすることだけです、class = "showで希望の要素をマーク
楽しい！