CSSでdivに画像を入れる方法は？

97

すべての画像をCSSに入れたいのですが（背景画像として配置する方法を知る唯一の方法です）。

しかし、このソリューションの問題は、divが画像のサイズを取得できないようにすることです。

だから私の質問は：<div><img src="..." /></div>CSSで同等のものを持つための最良の方法は何ですか？

css image

— ダニーY
ソース

6

背景は代替ではありません。画像がコンテンツの理解に関連していない場合は背景を使用する必要があります。それ以外の場合は通常どおりにする必要があります<img>

— Fabrizio Calderan

画像のサイズを手動で見つけてdivに同じものを与える以外は、私はそうは思わない。

— ジャワド

正しい方法：<img>画像が関連性がある場合、<div>背景が画像のみの場合は背景のみ。画像サイズが可変で重要な場合は、を使用する必要があります<img>。なぜ背景を使いたいのですか？

— アレッサンドロペッツァート、2012年

134

Jaapによるこの回答：

<div class="image"></div>

そしてCSSでは：

div.image {
   content:url(http://placehold.it/350x150);
}

あなたはこのリンクでそれを試すことができます：http : //jsfiddle.net/XAh2d/

これはcss content http://css-tricks.com/css-content/に関するリンクです

これはChrome、firefox、Safariでテストされています。（私はMacを使っているので、誰かがIEで結果を持っている場合は、それを追加するように言ってください）

— ダニーY
ソース

divあなたが尋ねたように、これは画像の同じサイズを取ることにはなりません。：あなたはdiv要素に境界線を追加した場合に発生するものを見てjsfiddle.net/XAh2d/6何もないのdivは、サイズは0x0を持っており、画像の背後に隠されているので、。

— アレッサンドロペッツァート

：beforeを削除する必要があります。私の回答を編集しました。ここでそれを確認しjsfiddle.net/2pFhc

— ダニーY

2

@DanyYねえ、あなたはあなたのフィドルを更新したと言ったが、私はそこに緑のボーダーしか見えない：jsfiddle.net/2pFhcなぜ？

— Sharikov Vladislav 2014

3

これは、firefox 55では機能しませんでした。いくつかのクロスブラウザの決定が必要です。before | afterで動作します。

— Marselo Bonagi 2017

1

FFとChromeで:: beforeおよびdisplay：flexを使用して動作します。=> jsfiddle.net/q0vL1m7v/1

— Catweazle

21

あなたはこれを行うことができます：

<div class="picture1">&nbsp;</div>

そしてこれをあなたのCSSファイルに入れてください：

div.picture1 {
   width:100px; /*width of your image*/
   height:100px; /*height of your image*/
   background-image:url('yourimage.file');
   margin:0; /* If you want no margin */
   padding:0; /*if your want to padding */
}

それ以外の場合は、単純にそれらを使用します

— 柔術
ソース

固定サイズを避けようとしていました。

— Dany Y

固定サイズを避けようとする場合、最も簡単な方法はプレーンimgタグを使用することです。これで何を達成しようとしていますか？おそらく、PHPのgetimagesizeを使用して画像サイズを取得し、対応するstyleandまたはor imgタグをその特定の画像にエコーするなど、プログラムによって別の解決策があるかもしれません。

— JudeJitsu、2012年

5

これをサンプルコードとして使用します。imageheightとimage widthを実際の画像のサイズに置き換えます。

<div style="background:yourimage.jpg no-repeat;height:imageheight px;width:imagewidth px">
</div>

— タブレズ・アーメド
ソース

動作しますが、質問は「CSS」に関するものでした

— Michael Biermann、2015年

おそらくそうすべきではない。

— jasonleonhard 2017年

5

JavaScript / Jqueryの場合：

非表示の画像を読み込む img
画像が読み込まれたら、幅と高さを取得します
動的に作成しdiv、幅、高さ、背景を設定する

オリジナルを削除 img

  $(document).ready(function() {
    var image = $("<img>");
    var div = $("<div>")
    image.load(function() {
      div.css({
        "width": this.width,
        "height": this.height,
        "background-image": "url(" + this.src + ")"
      });
      $("#container").append(div);
    });
    image.attr("src", "test0.png");
  });

— アレッサンドロ・ペッツァート
ソース