Як помістити зображення в 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, а потім повтор відповідного styleі / або imgтегу для цього певного зображення.

— JudeJitsu

5

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

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

— Табрез Ахмед
джерело

Працює, але питання стосувалося "CSS"

— Michael Biermann

Можливо, не повинно.

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

— Алессандро Пеццато
джерело