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

97

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

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

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

css image Дэни И
источник
6
Фоны не альтернатива: фоны должны использоваться, если изображения не имеют отношения к восприятию контента, в противном случае они должны быть такими же обычными,<img>
Фабрицио Кальдеран,
Я не думаю, что вы можете, кроме ручного определения размера изображения и предоставления того же div.
Джавад
Правильный способ: <img>если изображение актуально, <div>с фоном, если изображение только приятное. Если размер изображения переменный и важен, вы должны использовать <img>. Почему вы хотите использовать фон?
Алессандро Пеццато

Ответы:

134

Этот ответ Яапа :

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

Дэни И
источник
Это не делает divснимок такого же размера, как вы просили. Посмотрите, что произойдет, если вы добавите границу к div: jsfiddle.net/XAh2d/6 Ничего, потому что div имеет размер 0x0 и скрыт за изображением.
Алессандро Пеццато
вы должны удалить: before, я отредактировал свой ответ. проверьте это здесь jsfiddle.net/2pFhc
Dany Y
2
@DanyY, эй, ты сказал, что обновил скрипку, но я вижу только зеленые границы: jsfiddle.net/2pFhc почему?
Шариков Владислав
3
У меня это не сработало на firefox 55. Требуется некое кроссбраузерное решение. Работает с до | после.
Марсело Бонаджи,
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
5

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

<div style="background:yourimage.jpg no-repeat;height:imageheight px;width:imagewidth px">
</div>
Табрез Ахмед
источник
Работает, но вопрос касался "CSS"
Майкл Бирманн
Возможно, этого не должно быть.
jasonleonhard
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");
  });
Алессандро Пеццато
источник