tamaño - poner imagen de fondo en html que ocupe toda la pantalla

Tamaño máximo para la imagen de fondo CSS

Question

Tengo un cuadro de 70 por 50 px y tengo varias imágenes (archivos SVG, por lo que no tengo tamaño). Quiero mantener su relación de aspecto, pero algunas imágenes son verticales y otras tienen el tamaño de un paisaje. Así que puedo hacer:

background-size: 70px auto;

Y eso funcionará para todos los iconos del paisaje. Pero estirará las imágenes del retrato y las hará más altas, por lo que aún tendrán la relación de aspecto correcta, pero la parte superior e inferior se cortarán.

¿Hay algún tipo de fondo-max-tamaño?

(como alternativa, la única razón por la que estoy usando la imagen de fondo es porque puedes alinear la imagen en el centro, horizontal y verticalmente , por lo que la alternativa es encontrar la forma de alinear verticalmente un elemento img dentro de un elemento li).

Answer 1

Este es un problema que CSS no puede resolver por sí solo. Hay bibliotecas de JavaScript que harán este trabajo. Si usa jQuery , puede encontrar un complemento o hacer rodar su propia función.

Agarre el width y el height de la imagen y calcule la relación (x / y). Si la relación es mayor que 70/50 (1.4), configure el ancho a 70px y la altura a (70 * x / y). Si la relación es menor que 70/50 (1.4), establezca la altura en 50px y el ancho en (50 * x / y).

También vea CSS vertical-align

Si utiliza navegadores que no admiten la alineación vertical, puede colocar la imagen absolutamente al 50% y establecer el margen superior (ancho * -0.5) usando JavaScript. Eso alineará la mitad de la imagen con la mitad del elemento padre, que es lo mismo que la alineación central vertical.

Answer 2

La respuesta a esta pregunta está un poco desactualizada. Como menciona stringman5 , ninguna de las opciones de CSS es compatible con IE8 o inferior. Tampoco es la mejor opción tener jQuery manejar sus imágenes de fondo si no es necesario. Para usar una opción que incluye las alternativas para los navegadores antiguos, sin usar JavaScript, puede hacer algo en este sentido:

#myElement {
    background: #FFFFFF url(''mybackground.jpg'') no-repeat right top;
}

@media only screen and (max-width: 1024px){
    #myElement {
        background-size: 50%;
    }
}

Tenga en cuenta que estoy usando max-width en mi consulta de medios, esto significa que background-size: 50%; Se aplicará HASTA 1024px . Más allá de ese punto, hace su tamaño predeterminado. En los navegadores más antiguos que no admiten consultas de medios o tamaño de fondo, ignorarán las opciones y representarán el tamaño máximo de la imagen de fondo (tamaño predeterminado).

Answer 3

No es tan difícil hacer eso con CSS

• Primero, por favor, eche un vistazo a las especificaciones de Mozilla para unidades mixtas para background-size .
• En segundo lugar, considere simplemente establecer background-size: contain; (IE9 +, Safari 4.1+, FF 3.0+, Opera 10+) y min/max-width/height para el elemento contenedor.

Answer 4

Puede resolver este problema absolutamente sin JavaScript utilizando una combinación de background-size CSS3 y consultas de medios. p.ej:

@media only screen and (max-width: 1000px) {
    #element {
        background-size: contain;
    }
}

Tenga en cuenta que ninguno de ellos es compatible con IE8 o inferior, por lo que debe incluir alternativas para el IE antiguo si aún lo admite.