divの高さを取得して背景サイズに自動調整する方法は？

Question

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

Answer 1

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

これは、周囲のdivを<=>要素内の画像のサイズに設定しますが、背景として表示します。

<div style="background-image: url(http://your-image.jpg);">
 <img src="http://your-image.jpg" style="visibility: hidden;" />
</div>

Answer 2

背景画像をimg要素のように機能させる非常に優れた方法があり、height要素を自動的に調整します。画像のwidthとpadding-topの比率を知る必要があります。コンテナの<=>を0に設定し、<=>を画像比率に基づいたパーセンテージとして設定します。

次のようになります。

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 /

Answer 3

CSSを使用して背景画像のサイズを自動調整する方法はありません。

他の人が述べたように、サーバー上の背景画像を測定し、それらの属性をdivに適用することで、ハックすることができます。

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

画像の自動調整にdivが必要な場合、div内に<img>タグを挿入しないのはなぜですか？

Answer 4

この回答は他の回答と似ていますが、ほとんどのアプリケーションで全体的に最適です。通常は、画像サイズを事前に知っておく必要があります。これにより、ネガティブパディングや画像の絶対配置なしで、オーバーレイテキスト、タイトルなどを追加できます。これらのキーは、下の例に見られるように、画像のアスペクト比に一致するようにパディング％を設定することです。 この回答を使用し、基本的に画像の背景を追加しました。

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

Answer 5

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

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

Answer 6

これがここまでずっと見られないことを確認してください。しかし、あなたの問題が私のものと同じなら、これは私の解決策でした：

.imaged-container{
  background-image:url('<%= asset_path("landing-page.png") %> ');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 65vw;
}

画像の中央にdivを配置したかったため、これが可能になりました。

Answer 7

他の回答では見逃していた純粋なCSSソリューションがあります。

<！> quot; content：<！> quot;プロパティは主にテキストコンテンツを要素に挿入するために使用されますが、画像コンテンツを挿入するためにも使用できます。

.my-div:before {
    content: url("image.png");
}

これにより、divの高さは画像の実際のピクセルサイズに変更されます。幅のサイズも変更するには、次を追加します。

.my-div {
    display: inline-block;
}

Answer 8

サーバー側で実行できます。画像を測定してからdivサイズを設定するか、JSで画像を読み込んで属性を読み取り、DIVサイズを設定します。

ここでのアイデアは、同じ画像をdiv内にIMGタグとして配置しますが、可視性を提供します。

Answer 9

この問題があり、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属性を使用して画面を操作しましたこの問題を解決します。

Answer 10

これについてはどうですか：）

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

Answer 11

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

アスペクト比が4/1で、divの幅が32％であるとします：

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

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

Answer 12

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

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

Answer 13

そのようなことができます

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

Answer 14

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

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

Answer 15

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

で目的の要素をマークします。

お楽しみください

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

Answer 16

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

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

<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をお勧めしません。特定の場合、floatを使用しても問題ありません。ただし、ほとんどの場合、クロスブラウザテストを実行しているときに非常に多くのことに影響するため、floatの使用は避けます。

これが役立つことを願って：）

Answer 17

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

<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）で設定することです。

Answer 18

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

divのセットアップ

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

<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();        
    }
});

Answer 19

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

その写真はそのように作成されており、ページから見えない画像をドラッグすることもできません。

Answer 20

divに追加するだけ

style="overflow:hidden;"