¿Cómo poner una imagen en div con CSS?

97

Me gustaría tener todas mis imágenes en CSS (la única forma que sé es ponerlas como imágenes de fondo).

Pero el problema en esta solución es que nunca puedes dejar que el div tome el tamaño de la imagen.

Entonces mi pregunta es: ¿cuál es la mejor manera de tener el equivalente <div><img src="..." /></div>en CSS?

css image Dany Y
fuente
6
Los fondos no son una alternativa: los fondos deben usarse si las imágenes no son relevantes para la comprensión del contenido, de lo contrario deben ser tan regulares<img>
Fabrizio Calderan
Aparte de averiguar manualmente el tamaño de la imagen y darle al div lo mismo, no creo que puedas.
Jawad
La forma correcta: <img>si la imagen es relevante, <div>con fondo si la imagen es solo atractiva para la vista. Si el tamaño de la imagen es variable e importante, debe usar <img>. ¿Por qué quieres utilizar el fondo?
Alessandro Pezzato

Respuestas:

134

Esta respuesta de Jaap :

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

y en CSS: 

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

puedes probarlo en este enlace: http://jsfiddle.net/XAh2d/

este es un enlace sobre contenido css http://css-tricks.com/css-content/

Esto se ha probado en Chrome, Firefox y Safari. (Estoy en una Mac, así que si alguien tiene el resultado en IE, dígame que lo agregue)

Dany Y
fuente
Esto no hace que divtome el mismo tamaño de la imagen, como lo pidió. Mire lo que sucede si agrega un borde a div: jsfiddle.net/XAh2d/6 Nada, porque el div tiene un tamaño de 0x0 y está oculto detrás de la imagen.
Alessandro Pezzato
debe eliminar el: antes, edité mi respuesta. compruébalo aquí jsfiddle.net/2pFhc
Dany Y
2
@DanyY hey, dijiste que actualizaste tu violín, pero solo veo bordes verdes allí: jsfiddle.net/2pFhc ¿ por qué?
Sharikov Vladislav
3
Esto no funcionó para mí en Firefox 55. Necesito una decisión entre navegadores. Funciona con antes | después.
Marselo Bonagi
1
funciona para mí en FF y chrome con :: before y display: flex; => jsfiddle.net/q0vL1m7v/1
Catweazle
21

Puedes hacerlo:

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

y ponga esto en su archivo 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 */
}

de lo contrario, utilícelos como simples

JudeJitsu
fuente
Intentaba evitar tamaños fijos.
Dany Y
Si está intentando evitar tamaños fijos, la forma más sencilla es utilizar la imgetiqueta simple . ¿Qué estás tratando de lograr con esto? Tal vez hay otra solución mediante programación, como conseguir el tamaño de la imagen a través de PHP getimagesize y luego se hacen eco de la correspondiente styley o imgetiqueta para que cierta imagen.
JudeJitsu
5

Toma esto como un código de muestra. Reemplace la altura y el ancho de la imagen por las dimensiones de la imagen.

<div style="background:yourimage.jpg no-repeat;height:imageheight px;width:imagewidth px">
</div>
Tabrez Ahmed
fuente
Funciona, pero la pregunta era sobre "CSS"
Michael Biermann
Quizás no debería.
Jasonleonhard
5

Con Javascript / Jquery:

  • cargar imagen con oculto img
  • cuando la imagen ha sido cargada, obtenga ancho y alto
  • crear divy establecer dinámicamente el ancho, la altura y el fondo

  • quitar el original 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
fuente