Bagaimana cara meletakkan gambar di div dengan CSS?

97

Saya ingin semua gambar saya dalam CSS (satu-satunya cara yang saya tahu adalah menempatkannya sebagai gambar latar belakang).

Tetapi masalah dalam solusi ini adalah Anda tidak pernah bisa membiarkan div mengambil ukuran gambar.

Jadi pertanyaan saya adalah: apa cara terbaik untuk memiliki padanan <div><img src="..." /></div>dalam CSS?

css image Dany Y
sumber
6
Latar belakang bukanlah alternatif: latar belakang harus digunakan jika gambar tidak relevan untuk pemahaman konten, jika tidak gambar harus biasa<img>
Fabrizio Calderan
Selain mencari tahu ukuran gambar secara manual dan memberikan div yang sama, saya rasa Anda tidak bisa.
Jawad
Cara yang benar: <img>jika gambar relevan, <div>dengan latar belakang jika gambar hanya eye-candy. Jika ukuran gambar bervariasi dan penting, Anda harus menggunakan <img>. Mengapa Anda ingin menggunakan background?
Alessandro Pezzato

Jawaban:

134

Jawaban dari Jaap ini :

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

dan di CSS: 

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

Anda dapat mencobanya di tautan ini: http://jsfiddle.net/XAh2d/

ini adalah tautan tentang konten css http://css-tricks.com/css-content/

Ini telah diuji di Chrome, firefox dan Safari. (Saya menggunakan mac, jadi jika seseorang mendapatkan hasilnya di IE, beri tahu saya untuk menambahkannya)

Dany Y
sumber
Ini tidak membuat divpengambilan gambar dengan ukuran yang sama, seperti yang Anda minta. Lihat apa yang terjadi jika Anda menambahkan perbatasan ke div: jsfiddle.net/XAh2d/6 Tidak ada, karena div berukuran 0x0 dan tersembunyi di balik gambar.
Alessandro Pezzato
Anda harus menghapus: sebelumnya, saya mengedit jawaban saya. periksa di sini jsfiddle.net/2pFhc
Dany Y
2
@DanyY hei, kamu bilang kamu memperbarui biolamu, tapi aku hanya melihat batas hijau di sana: jsfiddle.net/2pFhc kenapa?
Sharikov Vladislav
3
Ini tidak berhasil untuk saya di firefox 55. Perlu beberapa keputusan lintas browser. Bekerja dengan sebelum | sesudah.
Marselo Bonagi
1
bekerja untuk saya di FF dan chrome dengan :: before dan display: flex; => jsfiddle.net/q0vL1m7v/1
Catweazle
21

kamu bisa melakukan ini:

<div class="picture1">&nbsp;</div>

dan masukkan ini ke dalam file css Anda:

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

jika tidak, gunakan saja sebagai polos

JudeJitsu
sumber
Saya mencoba untuk menghindari ukuran tetap.
Dany Y
Jika Anda mencoba menghindari ukuran tetap, maka cara termudah adalah menggunakan imgtag biasa . Apa yang ingin Anda capai dengan ini? Mungkin ada solusi lain secara terprogram, seperti mendapatkan ukuran gambar melalui getimagesize PHP dan kemudian menggemakan tag styledan atau yang sesuai imguntuk gambar tertentu itu.
JudeJitsu
5

Ambil ini sebagai kode contoh. Ganti tinggi gambar dan lebar gambar dengan dimensi gambar Anda.

<div style="background:yourimage.jpg no-repeat;height:imageheight px;width:imagewidth px">
</div>
Tabrez Ahmed
sumber
Bekerja tetapi pertanyaannya tentang "CSS"
Michael Biermann
Mungkin seharusnya tidak.
jasonleonhard
5

Dengan Javascript / Jquery:

  • memuat gambar dengan tersembunyi img
  • ketika gambar telah dimuat, dapatkan lebar dan tinggi
  • membuat file div dan mengatur lebar, tinggi dan latar belakang

  • hapus yang asli 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");
  });
Alessandro Pezzato
sumber