320

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

4

28 に答える 28

287

おそらく非効率的な別の解決策は、 に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>
于 2012-08-23T18:59:41.860 に答える
36

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

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

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

<img>画像を自動調整するために div が必要な場合は、div内にタグを入れてみませんか?

于 2009-03-01T23:09:08.397 に答える
16

多分これは役立つかもしれませんが、それは正確な背景ではありませんが、アイデアは得られます:

<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>
于 2009-03-01T23:12:11.837 に答える
6

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

そして、ここにアイデアがあります。同じ画像をIMGタグとしてdiv内に配置しますが、可視性を与えます。非表示+相対位置で再生+このdivに画像を背景として与えます。

于 2009-03-01T23:05:25.673 に答える
1

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

    <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>
于 2015-12-18T03:45:37.967 に答える
1

最も気に入った回答に触発されて、min-height と「vw」単位を使用した解決策を考え出しました。

非常に珍しいプロポーションの画像がありました

実験を通して、私は最終的に使用することになりました

    min-height: 36vw;

画像の比率に応じて、その値を変更する必要があります

私の実際のページで使用されるcssコード：

    background:url('your-background-image-adress') center center no-repeat;
    background-size: 100%;
    background-position: top center;
    margin-top: 50px;
    width: 100%;
    min-height: 36vw;

コードペンの例https://codepen.io/viniciusrad/pen/GRNPXoL

于 2021-03-11T16:57:00.387 に答える
1

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

<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、高さに応じて配置された子がある場合は、「自動」などではなく数値を設定することをお勧めします。

于 2020-06-03T09:35:37.300 に答える
0

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

style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"
于 2013-09-03T21:44:08.340 に答える
-2

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();        
    }
});
于 2016-05-04T18:55:07.430 に答える
-4

に追加するだけdiv 

style="overflow:hidden;"
于 2013-06-26T03:33:38.883 に答える