web-dev-qa-db-ja.com

CSSでdivに画像を入れるにはどうすればいいですか？

私は自分のすべての画像をCSSで扱いたいと思います（私が知る唯一の方法はそれらを背景画像として入れることです）。

しかし、この解決策の問題は、divに画像のサイズをとらせることができないことです。

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

cssimage
86
Dany Y

この答えは Jaap ：

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

そしてCSSでは：

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

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

これはCSSのコンテンツについてのリンクです http://css-tricks.com/css-content/

これはChrome、Firefox、Safariでテスト済みです。 （私はMacにいるので、誰かがIEで結果を出したら、それを追加するように言ってください）

113
Dany Y

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

<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 */
}

そうでなければ、単に普通のものとしてそれらを使用してください

18
JudeJitsu

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");
  });
5
Alessandro Pezzato

サンプルコードとしてこれを取ります。 imageheightとimage widthをあなたの画像の寸法に置き換えてください。

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