html - toda - hacer que una imagen se adapte a un div

Escala div para adaptarse a la imagen de fondo

Question

Tengo un div con una imagen de fondo que quiero expandir 100% de ancho y escala automáticamente el div para que se ajuste a la altura requerida de la imagen. En este momento no está escalando la altura del div a menos que establezca la altura del div en 100%, pero luego solo se estira a la altura completa de la pantalla, mientras que quiero que se escale a la altura de la imagen.

Aquí está el html:

<div id="mainHeaderWrapper">
</div><!--end mainHeaderWrapper-->
<br class="clear" />;

Aquí está el css:

 #mainHeaderWrapper{
background: url(http://localhost/site/gallery/bg1.jpg);
width: 100%;
height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}
.clear { clear: both; }

Gracias por cualquier y toda la ayuda

Answer 1

Deja que una imagen transparente dicte tus dimensiones DIV .

demo jsbin

Dentro de ese div pongo la misma imagen.

<div id="mainHeaderWrapper">
<img src="path/to/image.jpg"><!-- I''m invisible! yey!-->
</div>

poner esa imagen a

#mainHeaderWrapper{
background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper img{
vertical-align: top;
width: 100%; /* max width */
opacity: 0; /* make it transparent */
}

De esa manera, la altura de la DIV será dictada por la imagen invisible que contiene,
Al tener la background-image configurada en el centro, llena ( 50% / 100% ) coincidirá con las proporciones de esa imagen.

No estoy seguro si quieres manipular los colores de la imagen de fondo o qué (usando el filter CSS3), pero ahora después de leer nuevamente lo que escribí ...
¿No es más simple simplemente poner una imagen dentro de un DIV? :)

¿Necesitas algo de contenido dentro de ese DIV?

Demostración de jsBin Debido a la imagen que contiene, necesitará un elemento secundario adicional que se establecerá en position:absolute y actuará como un elemento de superposición

<div id="mainHeaderWrapper">
<img src="path/to/image.jpg"><!-- I''m invisible! yey!-->
<div>
Some content...
</div>
</div>

#mainHeaderWrapper{
position: relative;
background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper > img{
vertical-align: top;
width: 100%; /* max width */
opacity: 0; /* make it transparent */
}
#mainHeaderWrapper > div{
position: absolute;
top: 0;
width: 100%;
height: 100%;
}

Answer 2

Esto se puede hacer sin usar una imagen ficticia. Usaré las dimensiones de una imagen con la que acabo de trabajar, por ejemplo.

Las dimensiones de mi imagen son 2880x1410. Simplifique las dimensiones -> 96/47 (utilicé esta sencilla calculadora de proporción http://andrew.hedges.name/experiments/aspect_ratio/ ). Una vez que tenga la relación simplificada, conecte la altura y el ancho a la ecuación:

altura: calc ((100vw * W) / H); Entonces el mío diría: altura: calc ((100vw * 47) / 96);

Tampoco hay que preocuparse por el contenido del div (a menos que no encajen)

Answer 3

Si conoce las proporciones de la imagen, use el porcentaje de relleno para definir la altura del contenedor. Establezca la height:0 y configure el relleno vertical en un porcentaje del ancho.

La clave de este método es que el relleno vertical basado en porcentajes siempre está relacionado con el ancho.

Según el modelo de caja (w3.org) :

El porcentaje se calcula con respecto al ancho del bloque que contiene la caja generada, incluso para ''padding-top'' y ''padding-bottom''.

Debajo, la imagen es de 400px X 200px, por lo que la proporción de altura a ancho es de 1: 2 y padding-top se establece en 50%;

#mainHeaderWrapper {
width: 100%;
height: 0;
padding-top:50%;
background-image: url(//lorempixel.com/400/200/abstract/1/);
background-size: 100% auto;
background-repeat: no-repeat;
}

<div id="mainHeaderWrapper"></div>
stuff below the image

En otro ejemplo, la imagen es de 300px X 100px. La altura es ⅓ del ancho, por lo que la padding-top se establece en 33.33%:

#mainHeaderWrapper {
width: 100%;
height: 0;
padding-top:33.33%;
background-image: url(//lorempixel.com/300/100/abstract/1/);
background-size: 100% auto;
background-repeat: no-repeat;
}

<div id="mainHeaderWrapper"></div>
stuff below the image

Editar:

Según lo solicitado por Paulie_D, el resto del contenido en la división debe posicionarse absolutamente, como se muestra a continuación. Sugiero posicionar estos elementos usando porcentajes, también.

#mainHeaderWrapper {
width: 100%;
height: 0;
padding-top: 33.33%;
background-image: url(//lorempixel.com/300/100/abstract/1/);
background-size: 100% auto;
background-repeat: no-repeat;
}
div#inner_content {
position: absolute;
top:0;
width:100%;
margin-top:10%;
color: #FFF;
text-align: center;
font-size:20px;
}

<div id="mainHeaderWrapper">
<div id="inner_content">Hello World</div>
</div>
stuff below the image

Answer 4

body{ margin: 0; padding: 0}
#box1{
background: url(http://lorempixel.com/400/200/food/);
background-size: cover;
background-attachment: fixed;
margin: 0;
width: 100%;
height: 100vh;
display: table;
}
h1{ color: #ffffff; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; font-size: 38px; text-align: center; font-weight: normal; background: rgba(0,0,0,0.3); display: table-cell; vertical-align: middle}

<div id="box1">
<h1>Code Bluster BILU </h1>
</div>