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

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