Escala DIV para ajustar la imagen de fondo -- html campo con css camp Relacionados El problema

Scale div to fit background image


25
vote

problema

Español

Tengo un div con una imagen de fondo que quiero expandir el 100% de ancho y la escala automática, el div para adaptarse a la altura requerida de la imagen. En este momento, no está escalando la altura de división a menos que establezca la altura del DIV a 100%, pero luego se estira a la altura total 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 todas y todas las ayudas

Original en ingles

I have a div with a background image that I want to expand 100% width and auto scale the div to fit the required height of the image. At the moment it is not scaling the div height unless I set the height of the div to 100% but then it just stretches to the full height of the screen, whereas I want it to scale to the height of the image.

Here is the html:

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

Here is the 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; } 

Thanks for any and all help

     
         
         

Lista de respuestas

29
 
vote
vote
La mejor respuesta
 

Deja que una imagen transparente dicte los DIV Dimensiones.
Dentro de ese div la misma imagen con CSS opacity: 0

jsbin demo

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

Configure 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 del DIV será dictada por la imagen invisible que contiene, y que tenga el background-image en Centro, completo ( 9988777665 ) Esto coincidirá con las proporciones de esa imagen.

¿Necesitas algún contenido dentro de ese DIV?

jsbin demo Debido A la imagen que contiene, necesitará un elemento secundario adicional que se establecerá en position: absolute Actuando como un elemento de superposición

  <div id="mainHeaderWrapper">    <img src="path/to/image.jpg"><!-- I'm invisible! -->    <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%; }   
 

Let a transparent image dictate the DIV dimensions.
Inside that div put the same image with CSS opacity: 0

jsBin demo

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

set that image to

#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 */ } 

That way the height of the DIV will be dictated by the containing invisible image, and having the background-image set to center, full (50% / 100%) it will match that image's proportions.

Need some content inside that DIV?

jsBin demo Due to the containing image, you'll need an extra child element that will be set to position: absolute acting as an overlay element

<div id="mainHeaderWrapper">    <img src="path/to/image.jpg"><!-- I'm invisible! -->    <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%; } 
 
 
     
     
11
 
vote

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

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

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

El porcentaje se calcula con respecto al ancho de la Bloque que contiene la caja generada, incluso para 'Padding-Top' y 'Padding-Bottom'.

A continuación, la imagen es de 400 px X 200px, por lo que la proporción de altura a ancho es 1: 2 y opacity: 00 se establece en 50%;

  opacity: 0111   
  opacity: 02  

En otro ejemplo, la imagen es 300px x 100px. La altura es ... "del ancho, por lo que el opacity: 03 se establece en 33.33%:

  opacity: 04  
  opacity: 05  

Editar:

Según lo solicitado por Paulie_D, otro contenido en el DIV debe posicionarse absolutamente, demostrado a continuación. Sugiero posicionar estos elementos utilizando porcentajes, también.

  opacity: 06  
  opacity: 07  
 

If you know the proportions of the image, use percentage padding to define the height of the container. Set height:0 and set vertical padding to a percentage of the width.

They key to this method is that percentage-based vertical padding is always related to width.

According to the box model (w3.org):

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'.

Below, the image is 400px X 200px, so the proportion of height to width is 1:2 and padding-top is set to 50%;

#mainHeaderWrapper {   width: 100%;   height: 0;   padding-top: 50%;   background-image: url('https://dummyimage.com/400x200/');   background-size: 100% auto;   background-repeat: no-repeat; }
<div id="mainHeaderWrapper"></div> stuff below the image

In another example, the image is 300px X 100px. The height is xe2x85x93 of the width, so the padding-top is set to 33.33%:

#mainHeaderWrapper {   width: 100%;   height: 0;   padding-top:33.33%;   background-image: url('https://dummyimage.com/300x100/');   background-size: 100% auto;   background-repeat: no-repeat; }
<div id="mainHeaderWrapper"></div> stuff below the image

Edit:

As prompted by Paulie_D, other content in the div must be positioned absolutely, demonstrated below. I suggest positioning these elements using percentages, as well.

#mainHeaderWrapper {   width: 100%;   height: 0;   padding-top: 33.33%;   background-image: url('https://dummyimage.com/300x100/');   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
 
 
2
 
vote

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 - & gt; 96/47 (utilicé esta calculadora de relación simple http://andrew.hedges.name/experiments/aspect_ratio / ). Una vez que tenga la proporción simplificada, enchufe la altura y el ancho a la ecuación:

altura: calc ((100VW * W) / H); Así que la mía leería: Altura: Calc ((100VW * 47) / 96);

No hay que preocuparse por los contenidos del div (a menos que no se ajusten)

 

This can be done without using a dummy image. I will use dimensions of an image I just worked with for example.

The dimensions of my image are 2880x1410. Simplify the dimensions -> 96/47 (I used this simple ratio calculator http://andrew.hedges.name/experiments/aspect_ratio/). Once you have the simplified ratio, plug the height and width to the equation:

height: calc((100vw * W) / H); So mine would read: height: calc((100vw * 47) / 96);

No need to worry about the contents of the div either (unless they dont fit)

 
 
 
 
0
 
vote

  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>  
 

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>
 
 

Relacionados problema

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...

0  Imagen de fondo Blurs en Firefox3  ( Background image blurs in firefox3 ) 
Cuando uso la imagen en mi página HTML usando la propiedad de fondo. Los loks están bien en IE, pero se ve borroso en Firefox. Wat podría ser la posible soluc...

1  Directrices para diseñar HTML para una fácil personalización CSS  ( Guidelines for designing html for easy css customization ) 
Estoy haciendo un proyecto SAAS, y queremos que cada cliente pueda cargar una página CSS para "su" sitio web. (Aunque en realidad, todos los sitios del client...

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...

0  LazyWeb: necesita Javascript que elimina los elementos de LI basados ​​en la clase visitada de un elemento  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
Tengo esta página que tiene muchos datos que no necesito, ya que ya he hecho clic en él, pero se repite a menudo, así que tengo que buscar visualmente el azul...

4  Cuerda continua que no se envuelve en TD  ( Continuous string not getting wrapped in td ) 
Cuando coloco una larga cadena continua en mi ancho fijo TD, no se está envuelto. La cadena aumenta el ancho de mi mesa. ¿Alguien puede ayudarme con esto? P...

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

8  Desapareciendo bordes de células de mesa CSS en navegadores basados ​​en gecko  ( Disappearing css table cell borders in gecko based browsers ) 
Tengo una construcción de tabla HTML muy específica que parece revelar un error de gecko. Aquí hay una versión destilada del problema. Observe la siguiente ...

0  Deshacerse del disco en el artículo de la lista  ( Getting rid of disc in list item ) 
Estoy desarrollando un sitio usando jquery, y jquery ui Tabs. Por alguna razón, mis pestañas (lista desordenada) están mostrando sus balas en todos los navega...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos