Как поместить изображение в 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");
  });

— Алессандро Пеццато
источник