Как поместить изображение в div с помощью CSS?

Я хотел бы иметь все мои изображения в CSS (единственный способ, которым я знаю, как разместить их в качестве фоновых изображений).

Но проблема в этом решении заключается в том, что вы не можете позволить div принимать размер изображения.

Итак, мой вопрос: какой лучший способ получить эквивалент <div><img src="..." /></div> в CSS?

Ответ 1

Этот ответ 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, скажите мне добавить его)

Ответ 2

вы можете сделать это:

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

иначе, просто используйте их как обычные

Ответ 3

С 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");
  });

Ответ 4

Возьмите это как пример кода. Замените imageheight и ширину изображения вашими размерами изображения.

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