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

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