111

すべての画像をCSSで表示したいと思います（背景画像として画像を配置する方法を知る唯一の方法です）。

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

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

4

4 に答える 4

162

Jaapによるこの答え：

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

そしてCSSで：

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

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

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

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

于 2012-05-31T12:32:42.427 に答える
24

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

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

それ以外の場合は、プレーンとして使用してください

于 2012-05-31T08:14:21.407 に答える
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");
  });
于 2012-05-31T08:24:20.890 に答える
5

これをサンプルコードとして使用してください。imageheightとimagewidthを画像のサイズに置き換えます。

<div style="background:yourimage.jpg no-repeat;height:imageheight px;width:imagewidth px">
</div>
于 2012-05-31T08:16:17.093 に答える