CSS ile div'e bir resim nasıl yerleştirilir?

97

Tüm resimlerimi CSS'de istiyorum (bilmemin tek yolu onları arka plan resimleri olarak koymaktır).

Ancak bu çözümdeki sorun, div'in resmin boyutunu almasına asla izin verememenizdir.

Öyleyse sorum şu: <div><img src="..." /></div>CSS'de eşdeğerine sahip olmanın en iyi yolu nedir?

css image

— Dany Y
kaynak

6

Arka planlar bir alternatif değildir: görseller içeriğin anlaşılmasıyla ilgili değilse arka planlar kullanılmalıdır, aksi takdirde normal olmalıdır<img>

— Fabrizio Calderan

Görüntünün boyutunu manuel olarak bulmak ve aynı div'i vermek dışında, yapabileceğinizi sanmıyorum.

— Jawad

Doğru yol: <img>Resim ilgiliyse, <div>arka planla, resim yalnızca göz alıcıysa. Görüntü boyutu değişken ve önemliyse kullanmalısınız <img>. Neden arka planı kullanmak istiyorsun?

— Alessandro Pezzato

137

Jaap'ın bu cevabı :

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

ve CSS'de:

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

bu bağlantıda deneyebilirsiniz: http://jsfiddle.net/XAh2d/

bu css içeriğiyle ilgili bir bağlantıdır http://css-tricks.com/css-content/

Bu, Chrome, firefox ve Safari'de test edilmiştir. (Mac kullanıyorum, bu yüzden birisi IE'de sonuç aldıysa bana eklememi söyle)

— Dany Y
kaynak

Bu, divistediğiniz fotoğrafın aynı boyutta çekilmesini sağlamaz . Div: jsfiddle.net/XAh2d/6 Nothing için bir kenarlık eklerseniz ne olacağına bakın , çünkü div 0x0 boyutuna sahiptir ve görüntünün arkasında gizlidir.

— Alessandro Pezzato

kaldırmalısınız: daha önce cevabımı düzenledim. buradan kontrol edin jsfiddle.net/2pFhc

— Dany Y

2

@DanyY hey, kemanını güncellediğini söyledin, ama orada sadece yeşil sınırlar görüyorum: jsfiddle.net/2pFhc neden?

— Sharikov Vladislav

3

Bu benim için firefox 55'te işe yaramadı. Tarayıcının bazı kararlarına ihtiyacınız var. Önce | sonra ile çalışır.

— Marselo Bonagi

1

benim için FF ve chrome üzerinde :: before ve display: flex; => jsfiddle.net/q0vL1m7v/1

— Catweazle

21

Bunu yapabilirsiniz:

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

ve bunu css dosyanıza koyun:

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

aksi takdirde, bunları sade kullanın

— JudeJitsu
kaynak

Sabit boyutlardan kaçınmaya çalışıyordum.

— Dany Y

Sabit boyutlardan kaçınmaya çalışıyorsanız, en kolay yol düz imgetiketi kullanmaktır . Bununla ne başarmaya çalışıyorsun? PHP getimagesize ile resim boyutunu elde etmek ve ardından o belirli resim için karşılık gelen styleve veya imgetiketi yansıtmak gibi programlı olarak başka bir çözüm olabilir .

— JudeJitsu

5

Bunu örnek kod olarak alın. Görsel yüksekliğini ve genişliğini görsel boyutlarınızla değiştirin.

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

— Tabrez Ahmed
kaynak

Çalışıyor ama soru "CSS" ile

— ilgiliydi

Belki de olmamalı.

— jasonleonhard

5

Javascript / Jquery ile:

resmi gizli olarak yükle img
resim yüklendiğinde, genişliği ve yüksekliği alın
dinamik olarak bir divgenişlik, yükseklik ve arka plan oluşturup ayarlayın

orijinali kaldır 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
kaynak