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 hay tamaño) Quiero mantener su relación de aspecto, pero algunas imágenes son retratos y algunas son de tamaño paisajístico. Entonces puedo hacer:

background-size: 70px auto; 

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

¿hay algún tipo de fondo de tamaño máximo?

(alternativamente, la única razón por la imagen de fondo que estoy usando es porque se puede centrar alinear la imagen, 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í mismo. Hay bibliotecas de JavaScript que harán este trabajo. Si usa jQuery, puede encontrar un complemento o usar su propia función.

Tome la width y height de la imagen y calcule la relación (x/y). Si la relación es mayor a 70/50 (1.4), configure el ancho a 70px y la altura a (70 * x/y). Si la proporción es inferior a 70/50 (1,4), configure la altura a 50 px y el ancho a (50 * x/y).

Véase también CSS vertical-align

Si utiliza navegadores que no soportan vertical-align, puede posicionar la imagen absolutamente a 50%, y establecer el margen superior a (ancho * -0.5) utilizando JavaScript. Eso alineará el centro de la imagen con el centro del elemento principal, que es lo mismo que la alineación central vertical.

Answer 2

No es tan difícil hacerlo con CSS

• primero, por favor echar un vistazo a the Mozilla Specs de unidades mixtas de background-size.
• En segundo lugar, solo tiene que configurar background-size: contain; (IE9 +, Safari 4.1+, FF 3.0+, Opera 10+) y min/max-width/height para el elemento contenedor.

Answer 3

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

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

Nota que ni se apoyan en IE8 o por debajo, por lo que debe incluir mecanismos de emergencia para IE edad si todavía lo apoya.

Answer 4

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 para que jQuery maneje sus imágenes de fondo si no es necesario. Para utilizar una opción que incluye los retrocesos de navegador más antiguo, sin el uso de 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%; 
    } 
} 

en cuenta que estoy usando max-width en mi consulta de medios, esto significa que se background-size: 50%; se aplicará HASTA 1024px. Más allá de ese punto, es su tamaño predeterminado.En 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).