¿Cómo hacer que la altura del div se ajuste automáticamente al tamaño del fondo?
¿Cómo consigo que un div se ajuste automáticamente al tamaño del fondo que le configuré sin establecerle una altura específica (o altura mínima)?
Hay una manera muy agradable y genial de hacer que una imagen de fondo funcione como un imgelemento para que se ajuste heightautomáticamente. Necesitas conocer la imagen widthy heightla proporción. Establezca el valor heightdel contenedor en 0 y establezca el padding-topporcentaje según 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) */
}
Acabas 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/8m9ur5qj/
Otra solución, quizás ineficiente, sería incluir la imagen bajo un imgelemento establecido en visibility: hidden;. Luego haga que el background-imagediv circundante sea el mismo que el de la imagen.
Esto establecerá el div circundante al tamaño de la imagen en el imgelemento pero lo mostrará 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 solucionarlo midiendo la imagen de fondo en el servidor y luego aplicando esos atributos al div, como otros han mencionado.
También puedes modificar algo de javascript para cambiar el tamaño del div según el tamaño de la imagen (una vez que se haya descargado la imagen); esto es básicamente lo mismo.
Si necesita que su div se ajuste automáticamente a la imagen, podría preguntarle ¿por qué no coloca una <img>etiqueta dentro de su div?
Esta respuesta es similar a otras, pero en general es la mejor para la mayoría de las aplicaciones. Necesita saber el tamaño de la imagen de antemano, lo cual suele hacer. Esto le permitirá agregar texto superpuesto, títulos, etc. sin relleno negativo ni posicionamiento absoluto de la imagen. La clave es establecer el porcentaje de relleno para que coincida con la relación de aspecto de la imagen como se ve en el siguiente ejemplo. Utilicé esta respuesta y básicamente agregué una imagen de fondo.
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
background-size: contain;
background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
margin: 0 auto;
}
.wrapper:after {
padding-top: 75%;
/* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
color: black;
text-align: center;
margin-top: 5%;
}<div class="wrapper">
<div class="main">
This is where your overlay content goes, titles, text, buttons, etc.
</div>
</div>