Saltar al contenido

¿Cómo hacer que la altura div se ajuste automáticamente al tamaño del fondo?

Solución:

Hay una forma muy agradable y genial de hacer que una imagen de fondo funcione como una img elemento para que ajuste su height automáticamente. Necesitas conocer la imagen width y height proporción. Selecciona el height del contenedor a 0 y establezca el padding-top como porcentaje basado en la proporción de la imagen.

Se verá así:

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}

Acaba de obtener una imagen de fondo con altura automática que funcionará como un elemento img. Aquí hay un prototipo funcional (puede cambiar el tamaño y verificar la altura del div): http://jsfiddle.net/TPEFn/2/

Otra solución, quizás ineficaz, sería incluir la imagen bajo un img elemento establecido en visibility: hidden;. Entonces haz el background-image del div circundante lo mismo que la imagen.

Esto establecerá el div circundante al tamaño de la imagen en el img elemento pero mostrarlo como fondo.

<div style="background-image: url(http://your-image.jpg);">
 <img src="http://your-image.jpg" style="visibility: hidden;" />
</div>

No hay forma de ajustar automáticamente el tamaño de la imagen de fondo usando CSS.

Puede piratearlo midiendo la imagen de fondo en el servidor y luego aplicando esos atributos al div, como otros han mencionado.

También puede piratear algunos javascript para cambiar el tamaño del div según el tamaño de la imagen (una vez que la imagen se haya descargado); esto es básicamente lo mismo.

Si necesita que su div se ajuste automáticamente a la imagen, podría preguntarle por qué no pone un <img> etiqueta dentro de su div?

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *