divの高さを背景サイズに自動調整するにはどうすればよいですか？

特定の高さ（または最小高さ）を設定せずに、divに設定した背景のサイズに自動的に調整するにはどうすればよいですか？

別の、おそらく非効率的な解決策は、にimg設定された要素の下に画像を含めることvisibility: hidden;です。次にbackground-image、周囲のdivのを画像と同じにします。

これにより、周囲の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比率を知る必要があります。セットheight0に容器のをと設定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に適用することで、ハックできます。

また、JavaScriptをハックして、画像サイズに基づいてdivのサイズを変更することもできます（画像がダウンロードされたら）-これは基本的に同じことです。

画像を自動調整するために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;
}

サーバー側で行うことができます。画像を測定してdivサイズを設定するか、JSを使用して画像を読み込み、属性を読み取ってDIVサイズを設定します。

そしてここにアイデアがあります、IMGタグとして同じ画像をdiv内に配置しますが、可視性を与えます。

私はこの問題を抱えており、ハサナビの答えを見つけましたが、ワイドスクリーンに背景画像を表示するときに小さなバグが発生しました-背景画像が画面の幅全体に広がっていません。

だからここに私の解決策があります-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属性を使用して画面サイズを試し、この問題を修正しました。

これはどう ：）

.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>

デモ： http : //jsfiddle.net/josephmcasey/KhPaF/

単一の所定の背景画像であり、背景画像のアスペクト比を歪めずにdivを応答させたい場合は、最初に画像のアスペクト比を計算してから、次のようにしてアスペクト比を維持するdivを作成できます。 ：

たとえば、アスペクト比が4/1で、divの幅が32％だとします。

div {
  width: 32%; 
  padding-bottom: 8%; 
}

これは、パディングが含まれている要素の幅に基づいて計算されるという事実に起因します。

これは役に立つかもしれません、それは正確には背景ではありませんが、あなたは簡単なアイデアを得ます

    <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>

あなたはそのようなことをすることができます

<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>

ビルド時の画像の比率がわかっていて、ウィンドウの高さに基づいて高さを求め、最新のブラウザー（IE9 +）をターゲットにしている場合は、ビューポートユニットを使用できます。

.width-ratio-of-height {
  overflow-x: scroll;
  height: 100vh;
  width: 500vh; /* width here is 5x height */
  background-image: url("http://placehold.it/5000x1000");
  background-size: cover;
}

OPが求めていたものではありませんが、この質問を表示している多くの人に適している可能性があるため、ここで別のオプションを提供したいと考えました。

フィドル：https : //jsfiddle.net/6Lkzdnge/

私はいくつかの解決策を見て、それらは素晴らしいですが、私は驚くほど簡単な方法を見つけたと思います。

まず、背景画像から比率を取得する必要があります。単に1つの次元を別の次元に分割します。次に、たとえば66.4％のようなものを取得します

画像の比率がある場合は、比率にビューポートの幅を掛けることで、divの高さを簡単に計算できます。

height: calc(0.664 * 100vw);

私にとって、それは機能し、divの高さを適切に設定し、ウィンドウのサイズが変更されたときに変更します。

次のようなものがあるとします。

<div class="content">
    ... // inner HTML
</div>

背景を追加したいが、画像の大きさがわからない。

同様の問題があり、グリッドを使用して解決しました。

HTML

<div class="outer">
    <div class="content">
        ... // inner HTML
    </div>
    <img class="background" />
</div>

CSS

.outer{
    display: grid;
    grid-template: auto / auto;
    // or you can assign a name for this block
}
.content{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 2;
}
.background{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 1;
}

z-indexあなたはコースの場所のことができ、ちょうど背景に実際に画像を配置するためであるimg.background以上div.content。

注：これdiv.contentにより、画像の高さが同じになる場合div.contentがあります。そのため、その高さに応じて配置された子がある場合は、「auto」などではない数値を設定することができます。

Umbraco CMSでこの問題が発生した場合、このシナリオでは、divの 'style'属性に次のようなものを使用して、divに画像を追加できます。

style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"

私はしばらくの間この問題に対処しており、この問題を解決するためにjqueryプラグインを作成することにしました。このプラグインは、クラス "show-bg"を持つすべての要素を検索し（または独自のセレクターに渡すことができます）、それらの背景画像の寸法を計算します。あなたがしなければならないのは、このコードをインクルードし、必要な要素をclass = "show

楽しい！

https://bitbucket.org/tomeralmog/jquery.heightfrombg

考えられる最善の解決策は、幅と高さをパーセントで指定することです。これにより、モニターのサイズに基づいて画面をサイズ変更できます。よりレスポンシブなレイアウトです。

インスタンスの場合。あなたが持っている

<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>

これは、レスポンシブレイアウトが必要な場合に最適なオプションです。特定のケースでは、フロートを使用しても問題ない場合は、フロートをお勧めしません。しかし、ほとんどの場合、フロートの使用は避けてください。クロスブラウザテストを行う場合、フロートはかなりの数に影響します。

お役に立てれば ：）

実際にそれを行う方法を知っていれば、それは非常に簡単です。

<section data-speed='.618' data-type='background' style='background: url(someUrl) 
top center no-repeat fixed;  width: 100%; height: 40vw;'>
<div style='width: 100%; height: 40vw;'>
</div>
</section>

秘訣は、囲まれたdivを、通常のdivと同じように、背景のディメンション値と同じディメンション値（この例では、100％と40vw）に設定することです。

私はjQueryを使用してこれを解決しました。新しいCSSルールがこのタイプの動作をネイティブで許可するまでは、それが最善の方法であることがわかります。

divを設定する

下には、背景を表示するdiv（「ヒーロー」）があり、次に、背景画像の上にオーバーレイする内部コンテンツ/テキスト（「内部」）があります。インラインスタイルをヒーロークラスに移動できます（そして移動する必要があります）。ここに置いたので、どのスタイルが適用されているかをすばやく簡単に確認できます。

<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
    <div class="inner">overlay content</div>
</div>

画像のアスペクト比を計算する

次に、画像の高さを幅で割って、画像のアスペクト比を計算します。たとえば、画像の高さが660で幅が1280の場合、アスペクト比は0.5156です。

高さを調整するためのjQueryウィンドウサイズ変更イベントを設定する

最後に、ウィンドウのサイズ変更用のjQueryイベントリスナーを追加し、アスペクト比に基づいてヒーローdivの高さを計算して更新します。通常、このソリューションでは、アスペクト比を使用した計算が不完全なため、下部に余分なピクセルが残るため、結果のサイズに-1を追加します。

$(window).on("resize", function ()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

ページの読み込みで機能することを確認する

最初に画像サイズが計算されるようにページが読み込まれたときに、上記のサイズ変更呼び出しを実行する必要があります。そうしないと、ウィンドウのサイズを変更するまでヒーローdivは調整されません。リサイズ調整を行うために別の機能をセットアップしました。これが私が使用する完全なコードです。

function updateHeroDiv()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

$(document).ready(function() 
{       
    // calls the function on page load
    updateHeroDiv(); 

    // calls the function on window resize
    $(window).on("resize", function ()
    {
        updateHeroDiv();        
    }
});

メインレイヤーの不透明度が1程度で基本的に透明であるPhotoshopで画像を作成できる場合は、そのimgをdivに入れて、実際の画像を背景画像にします。次に、imgの不透明度を1に設定し、必要なサイズの寸法を追加します。

その画像はそのように行われ、非表示の画像をページからドラッグして外に出すこともできません。

追加するだけ div

style="overflow:hidden;"