CSS ¿Cómo se estira para ajustarse y mantener la relación de aspecto?

Question

Tengo el siguiente CSS:

.mod.left { 
background-image: url("http://www.myimage.jpg"); 
display: block; 
height: 160px; 
overflow: hidden; 
width: 175px; 
} 

que corresponde a este código HTML:

<div class="mod left"></div> 

Resulta en este lío:

si uso el fondo-css3 tamaño: 175px 160px; La relación de aspecto es realmente en mal estado que resulta en un lío como este:

¿Hay una manera de estirar una imagen para adaptarse a un div? Pero de una forma en que se mantiene la relación de aspecto? Quiero un cultivo automático.

Answer 1

Esto debería funcionar (en los navegadores que soportan background-size):

background-size: 175px auto; 

También puede probar:

background-size: cover; 

O:

background-size: contain; 

There's a good explanation on MDC.

Answer 2

¿Tiene que ser una imagen de fondo?

img{ 
width:300px; 
height:auto; 
} 


<img src="your-photo.png"> 

Answer 3

Usted puede utilizar la propiedad background-size con el valor contain:

background-size: contain; 

Aquí es un ejemplo de trabajo: https://jsfiddle.net/gusrodriguez/auuk97hf/1/

En el ejemplo anterior, el cuerpo tiene una imagen estirada en el fondo. También hay dos divs con tamaño arbitrario, y con otra imagen que se ajusta y mantiene la relación de aspecto.