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

hacer que una imagen se adapte a un div

Question

¿Cómo obtengo un div para ajustarme automáticamente al tamaño del fondo que establezco para él sin establecer una altura específica (o min-height) para él?

Answer 1

Bastante seguro de que esto nunca se habrá visto hasta aquí. Pero si tu problema era el mismo que el mío, esta era mi solución:

.imaged-container{
  background-image:url(''<%= asset_path("landing-page.png") %> '');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 65vw;
}

Quería tener una división en el centro de la imagen, y esto me permitirá hacerlo.

Answer 2

Esta respuesta es similar a otras, pero en general es la mejor para la mayoría de las aplicaciones. Necesitas saber el tamaño de la imagen de antemano, lo que normalmente haces. Esto le permitirá agregar texto de superposición, títulos, etc. sin relleno negativo o posicionamiento absoluto de la imagen. La clave es configurar el% 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 esencialmente solo agregué un fondo de imagen.

.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>

Answer 3

Hay una forma muy agradable y fresca de hacer que una imagen de fondo funcione como un elemento img para que ajuste su height automáticamente. Necesitas saber el width la imagen y la relación de height . Establezca la height del contenedor en 0 y establezca la padding-top como porcentaje en función de la relación de imagen.

Se verá como la siguiente:

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/

Answer 4

Hay una solución CSS pura que las otras respuestas han omitido.

La propiedad "contenido:" se usa principalmente para insertar contenido de texto en un elemento, pero también se puede usar para insertar contenido de imagen.

.my-div:before {
    content: url("image.png");
}

Esto hará que el div cambie el tamaño de su altura al tamaño de píxel real de la imagen. Para redimensionar el ancho también, agregue:

.my-div {
    display: inline-block;
}

Answer 5

He estado lidiando con este problema por un tiempo y decidí escribir un plugin jquery para resolver este problema. Este complemento encontrará todos los elementos con la clase "show-bg" (o puedes pasarlo por tu propio selector) y calcular sus dimensiones de imagen de fondo. todo lo que tiene que hacer es incluir este código, marque los elementos deseados con class = "show

¡Disfrutar!

https://bitbucket.org/tomeralmog/jquery.heightfrombg

Answer 6

La mejor solución que se me ocurre es especificando su ancho y altura en porcentaje. Esto le permitirá volver a personalizar su pantalla según el tamaño de su monitor. es más de diseño sensible ...

Para una instancia. tienes

<br/>
<div> . //This you set the width percent to %100
    <div> //This you set the width percent to any amount . if you put it by 50% , it will be half
    </div>
 </div>

Esta es la mejor opción si desea un diseño receptivo, no recomendaría flotar, en ciertos casos, está bien usar flotar. pero en la mayoría de los casos, evitamos el uso de flotante, ya que afectará a un número de cosas cuando esté realizando pruebas en varios navegadores.

Espero que esto ayude :)

Answer 7

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

Puede hackearlo midiendo la imagen de fondo en el servidor y luego aplicando esos atributos a la división, como han mencionado otros.

También puede piratear algunos javascript para cambiar el tamaño del div en función del tamaño de la imagen (una vez que la imagen ha sido descargada), esto es básicamente lo mismo.

Si necesitas que tu div se ajuste automáticamente a la imagen, puedo preguntarte ¿por qué no solo pones una etiqueta <img> dentro de tu div?

Answer 8

Puede hacerlo desde el servidor: midiendo la imagen y luego configurando el tamaño div, O cargando la imagen con JS, lea sus atributos y luego configure el tamaño DIV.

Y aquí hay una idea, ponga la misma imagen dentro del div como una etiqueta IMG, pero déle visibilidad: oculto + juegue con posición relativa + dé a este div la imagen como fondo.

Answer 9

Puede ser que esto pueda ayudar, no es exactamente un fondo, pero te dan una idea simple

    <style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
    <div>Hello</div>
</div>

Answer 10

Puedes hacer algo asi

<div style="background-image: url(http://your-image.jpg); position:relative;">
 <img src="http://your-image.jpg" style="opacity: 0;" />
<div style="position: absolute;top: 0;width: 100%;height: 100%;">my content goes here</div>
</div>

Answer 11

Qué tal esto :)

.fixed-centered-covers-entire-page{
    margin:auto;
    background-image: url(''https://i.imgur.com/Ljd0YBi.jpg'');
    background-repeat: no-repeat;background-size:cover;
    background-position: 50%;
    background-color: #fff;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:-1;
    position:fixed;
}

<div class="fixed-centered-covers-entire-page"></div>

Demostración: http://jsfiddle.net/josephmcasey/KhPaF/

Answer 12

Resolví esto usando jQuery. Hasta que las nuevas reglas de CSS permiten este tipo de comportamiento de forma nativa, creo que es la mejor manera de hacerlo.

Configura tus divs

Debajo tiene su div en el que desea que aparezca el fondo ("héroe") y luego el contenido / texto interno que desea superponer sobre la imagen de fondo ("interno"). Puedes (y debes) mover los estilos en línea a tu clase de héroe. Los dejé aquí para que sea rápido y fácil ver qué estilos se le aplican.

<div class="hero" style="background-image: url(''your-image.png''); background-size: 100%; background-repeat: no-repeat; width: 100%;">
    <div class="inner">overlay content</div>
</div>

Calcular la relación de aspecto de la imagen

A continuación, calcule su relación de aspecto para su imagen dividiendo la altura de su imagen por el ancho. Por ejemplo, si la altura de su imagen es 660 y su ancho es 1280, su relación de aspecto es 0.5156.

Configura un evento de cambio de tamaño de la ventana de jQuery para ajustar la altura

Finalmente, agregue un detector de eventos jQuery para cambiar el tamaño de la ventana y luego calcule la altura de su div héroe basada en la relación de aspecto y actualícela. Esta solución generalmente deja un píxel adicional en la parte inferior debido a cálculos imperfectos que usan la relación de aspecto, por lo que agregamos un -1 al tamaño resultante.

$(window).on("resize", function ()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

Asegúrese de que funciona en la carga de la página

Debe realizar la llamada de cambio de tamaño anterior cuando se carga la página para que los tamaños de las imágenes se calculen desde el principio. Si no lo haces, entonces el div héroe no se ajustará hasta que cambies el tamaño de la ventana. Configuré una función separada para hacer los ajustes de tamaño. Aquí está el código completo que uso.

function updateHeroDiv()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

$(document).ready(function() 
{       
    // calls the function on page load
    updateHeroDiv(); 

    // calls the function on window resize
    $(window).on("resize", function ()
    {
        updateHeroDiv();        
    }
});

Answer 13

Si puede hacer una imagen en Photoshop donde la capa principal tiene una opacidad de 1 o más y es básicamente transparente, coloque ese img en la división y luego haga de la imagen real la imagen de fondo. LUEGO, establezca la opacidad del img en 1 y agregue las dimensiones de tamaño que desee.

Esa imagen se hace de esa manera, y ni siquiera puedes arrastrar la imagen invisible de la página, lo cual es genial.

Answer 14

Si se trata de una imagen de fondo predeterminada única y desea que el div responda sin distorsionar la relación de aspecto de la imagen de fondo, primero puede calcular la relación de aspecto de la imagen y luego crear una división que mantenga su relación de aspecto haciendo lo siguiente :

Digamos que quieres una relación de aspecto de 4/1 y el ancho del div es 32%:

div {
  width: 32%; 
  padding-bottom: 8%; 
}

Esto se debe al hecho de que el relleno se calcula en función del ancho del elemento contenedor.

Answer 15

Tal vez esto pueda ayudar, no es exactamente un fondo, pero tienes la idea:

<style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
    <div>Hi there</div>
</div>

Answer 16

Tuve este problema y encontré la respuesta de Hasanavi, pero tuve un pequeño error al mostrar la imagen de fondo en una pantalla ancha: la imagen de fondo no se extendió a todo el ancho de la pantalla.

Así que aquí está mi solución, basada en el código de Hasanavi, pero mejor ... y esto debería funcionar tanto en pantallas extra anchas como en pantallas móviles.

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

/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
    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) */
    }
}

Como habrás notado, el background-size: contain; las propiedades no encajan bien en pantallas extra anchas, y el background-size: cover; La propiedad no encaja bien en las pantallas móviles, así que usé este atributo @media para jugar con los tamaños de pantalla y solucionar este problema.

Answer 17

Tuvo este problema con el CMS de Umbraco y en este escenario puede agregar la imagen al div utilizando algo como esto para el atributo ''estilo'' del div:

style="background: url(''@(image.mediaItem.Image.umbracoFile)'') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"

Answer 18

en realidad es bastante fácil cuando sabes cómo hacerlo:

<section data-speed=''.618'' data-type=''background'' style=''background: url(someUrl) 
top center no-repeat fixed;  width: 100%; height: 40vw;''>
<div style=''width: 100%; height: 40vw;''>
</div>
</section>

El truco es simplemente establecer el div adjunto como un div normal con valores dimensionales iguales a los valores dimensionales de fondo (en este ejemplo, 100% y 40 vw).

Answer 19

solo agrega a div

style="overflow:hidden;"

Answer 20

Otra solución, quizás ineficiente, sería incluir la imagen bajo un elemento img configurado para visibility: hidden; . Luego, haz que la background-image de background-image del div circundante sea igual a la imagen.

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

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