¿Cómo hacer que la altura del div se ajuste automáticamente al tamaño del fondo?
https://stackoverflow.com/questions/600743
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿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)?
Solución
Otra solución, quizás ineficiente, sería incluir la imagen bajo un elemento img establecido en visibility: hidden;. Luego, haga que el background-image del div circundante sea igual que la imagen.
Esto establecerá el div circundante al tamaño de la imagen en el elemento <=> pero lo mostrará como fondo.
<div style="background-image: url(http://your-image.jpg);">
<img src="http://your-image.jpg" style="visibility: hidden;" />
</div>
Otros consejos
Hay una manera muy agradable y genial de hacer que una imagen de fondo funcione como un img elemento para que ajuste su height automáticamente.Necesitas saber la imagen. width y height relació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) */
}
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/TPEFn/2/
No hay forma 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 al div, como otros han mencionado.
También puedes hackear 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 necesita que su div se ajuste automáticamente a la imagen, podría preguntarle por qué no coloca una etiqueta <img> dentro de su div.
Esta respuesta es similar a otras, pero en general es la mejor para la mayoría de las aplicaciones. Debe conocer el tamaño de la imagen de antemano, lo que generalmente hace. Esto le permitirá agregar texto superpuesto, títulos, etc. sin relleno negativo o posicionamiento absoluto de la imagen. La clave es establecer 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>
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>
Estoy bastante seguro de que esto nunca se verá aquí abajo. Pero si su 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 un div en el centro de la imagen, y esto me permitirá eso.
Hay una solución CSS pura que las otras respuestas han perdido.
El " contenido: " La propiedad 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 cambiar el tamaño del ancho también, agregue:
.my-div {
display: inline-block;
}
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, poner la misma imagen dentro del div como una etiqueta IMG, pero darle visibilidad: oculto + jugar con posición relativa + darle a este div la imagen como fondo.
Tuve este problema y encontré la respuesta de Hasanavi, pero recibí un pequeño error al mostrar la imagen de fondo en una pantalla panorámica: la imagen de fondo no se extendió a todo el ancho de la pantalla.
Entonces, 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 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, la propiedad background-size: contain; no encaja bien en pantallas extra anchas, y la propiedad background-size: cover; no encaja bien en pantallas móviles, así que usé este atributo @media para jugar con la pantalla tamaños y solucionar este problema.
¿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/
Si se trata de una única imagen de fondo predeterminada 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 un div que conserve su relación de aspecto mediante haciendo lo siguiente:
Digamos que desea una relación de aspecto de 4/1 y el ancho del div es 32%:
div {
width: 32%;
padding-bottom: 8%;
}
Esto resulta del hecho de que el relleno se calcula en función del ancho del elemento contenedor.
Puede ser que esto pueda ayudar, no es exactamente un fondo, pero tienes la 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>
Puedes hacer algo así
<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>
Tuve este problema con el Umbraco CMS y en este escenario puede agregar la imagen al div usando algo como esto para el atributo 'style' del div:
style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"
He estado lidiando con este problema por un tiempo y decidí escribir un complemento jquery para resolver este problema. Este complemento encontrará todos los elementos con la clase & Quot; show-bg & Quot; (o puede pasarle su propio selector) y calcular sus dimensiones de imagen de fondo. todo lo que tiene que hacer es incluir este código, marcar los elementos deseados con class = " show
¡Disfruta!
La mejor solución que se me ocurre es especificando su ancho y alto en porcentaje. Esto le permitirá cambiar el tamaño de su pantalla según el tamaño de su monitor. es más de diseño receptivo ..
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 float, en algunos casos está bien usar float. pero en la mayoría de los casos, evitamos el uso de flotante, ya que afectará una gran cantidad de cosas cuando realice pruebas en varios navegadores.
Espero que esto ayude :)
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 consiste en establecer el div incluido como un div normal con valores dimensionales iguales a los valores dimensionales de fondo (en este ejemplo, 100% y 40vw).
Resolví esto usando jQuery. Hasta que las nuevas reglas CSS permitan este tipo de comportamiento de forma nativa, creo que es la mejor manera de hacerlo.
Configura tus divs
A continuación tiene su div en el que desea que aparezca el fondo (" hero ") y luego el contenido / texto interno que desea superponer en la parte superior de su imagen de fondo (" interior "). Puede (y debe) mover los estilos en línea a su clase de héroe. Los dejé aquí, así que es 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
Luego 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.
Configure un evento de cambio de tamaño de la ventana 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 héroe div en función de 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 calcular los tamaños de imagen desde el principio. Si no lo hace, entonces el div hero no se ajustará hasta que cambie el tamaño de la ventana. Configuré una función separada para hacer los ajustes de cambio 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();
}
});
Si puede hacer una imagen en Photoshop donde la capa principal tiene una opacidad de 1 o menos y es básicamente transparente, coloque esa imagen en el div y luego convierta la imagen real en la imagen de fondo. ENTONCES 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 fuera de la página, lo cual es genial.
simplemente agregue a div
style="overflow:hidden;"
