Jak umieścić obraz w DIV z CSS?

97

Chciałbym mieć wszystkie moje obrazy w CSS (jedyny sposób, w jaki wiem, to umieścić je jako obrazy tła).

Ale problem w tym rozwiązaniu polega na tym, że nigdy nie możesz pozwolić, aby element div przyjął rozmiar obrazu.

Więc moje pytanie brzmi: jaki jest najlepszy sposób, aby mieć odpowiednik <div><img src="..." /></div>w CSS?

css image Dany Y
źródło
6
Tła nie są alternatywą: tła muszą być używane, jeśli obrazy nie są istotne dla zrozumienia treści, w przeciwnym razie powinny być tak samo regularne<img>
Fabrizio Calderan
Poza ręcznym ustaleniem rozmiaru obrazu i nadaniem tego samego elementu div, myślę, że nie możesz.
Jawad
Właściwy sposób: <img>jeśli obraz jest odpowiedni, <div>z tłem, jeśli obraz jest tylko przyjemny dla oka. Jeśli rozmiar obrazu jest zmienny i ważny, należy użyć <img>. Dlaczego chcesz używać tła?
Alessandro Pezzato

Odpowiedzi:

134

Ta odpowiedź Jaapa :

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

oraz w CSS: 

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

możesz spróbować pod tym linkiem: http://jsfiddle.net/XAh2d/

to jest link do zawartości css http://css-tricks.com/css-content/

Zostało to przetestowane w Chrome, Firefox i Safari. (Jestem na Macu, więc jak ktoś ma wynik na IE to powiedz żebym to dodał)

Dany Y
źródło
Nie oznacza to, że divrozmiar obrazu jest taki sam, jak prosiłeś. Zobacz, co się stanie, jeśli dodasz obramowanie do div: jsfiddle.net/XAh2d/6 Nic, ponieważ div ma rozmiar 0x0 i jest ukryty za obrazem.
Alessandro Pezzato
powinieneś usunąć: przed, zredagowałem moją odpowiedź. sprawdź tutaj jsfiddle.net/2pFhc
Dany Y
2
@DanyY hej, powiedziałeś, że zaktualizowałeś swoje skrzypce, ale widzę tam tylko zielone ramki: jsfiddle.net/2pFhc dlaczego?
Sharikov Vladislav
3
To nie zadziałało dla mnie w przeglądarce Firefox 55. Potrzebujesz decyzji w przeglądarce. Działa z przed | po.
Marselo Bonagi
1
działa u mnie na FF i chrome z :: before i display: flex; => jsfiddle.net/q0vL1m7v/1
Catweazle
21

możesz to zrobić:

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

i umieść to w swoim pliku 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 */
}

w przeciwnym razie użyj ich jako zwykłych

JudeJitsu
źródło
Starałem się unikać stałych rozmiarów.
Dany Y
Jeśli starasz się unikać stałych rozmiarów, najłatwiej jest użyć zwykłego imgtagu. Co próbujesz przez to osiągnąć? Może istnieje inne programowe rozwiązanie, takie jak pobranie rozmiaru obrazu przez PHP getimagesize, a następnie wyświetlenie odpowiedniego tagu stylei lub imgdla tego określonego obrazu.
JudeJitsu
5

Potraktuj to jako przykładowy kod. Zastąp wysokość i szerokość obrazu wymiarami obrazu.

<div style="background:yourimage.jpg no-repeat;height:imageheight px;width:imagewidth px">
</div>
Tabrez Ahmed
źródło
Działa, ale pytanie dotyczyło "CSS"
Michael Biermann
Może nie powinno.
jasonleonhard
5

Z Javascript / Jquery:

  • załaduj obraz z ukrytym img
  • po załadowaniu obrazu uzyskaj szerokość i wysokość
  • dynamicznie twórz divi ustaw szerokość, wysokość i tło

  • zdejmij oryginał 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
źródło