¿Cómo puedo cambiar el tamaño de una imagen sin estirarla?

Question

Quiero un <img>, cuyo ancho es del 40% de la página y se alarga.

¿Cómo puedo cambiar el tamaño sin estirar?

Por ejemplo, si tengo una imagen cuyo archivo originalmente se parece a esto:

____8888________ 
____8888________ 
____8888________ 

En mi página web, normalmente, debería parecerse:

____8888________ 
____8888________ 
____8888________ 

Tan pronto como hacer que el navegador un poco más estrecho, el max-width (digamos 10 caracteres en este ejemplo) entraría en vigencia.
Cuando eso sucede, me gustaría que fuera:

____8888__ 
____8888__ 
____8888__ 

(. Al igual que se ha cortado desde el lado derecho supuesto de ambos lados son mejores),
En lugar de:

__888_____ 
__888_____ 
__888_____ 

• Cualquier truco (ponerlo en el fondo de <div>) está bien.
• El ancho y la altura son desconocidos.
• Gracias a todos por sus respuestas anteriores, pero, lo siento, creo que no he puesto suficiente énfasis en "Después de limitando su ancho al 40% de la página", lo que significa que antes de limitar el ancho debería verse normal .

Answer 1

El truco es poner la imagen en un elemento de bloque contenedor, por ejemplo, un DIV. Una vez dentro, configure el ancho de la imagen al 100%, esto le indicará al navegador que se ajuste al ancho de la imagen al ras con los bordes izquierdo y derecho del DIV.

A continuación, puede controlar el ancho de la DIV a través de CSS, me parece que mantener la imagen en un elemento de bloque hace que la manipulación sea mucho más fácil cuando se crean diseños fluidos.

Ejemplo:

img.stretchy { 
 
width: 100%; /*Tells image to fit to width of parent container*/ 
 
} 
 
.container { 
 
width: 33%; /*Use this to control width of the parent container, hence the image*/ 
 
}

<div class="container"> 
 
    <img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="stretchy" /> 
 
</div>

Si usted wan la imagen para ser cortada/recortada en forma alguna, ponerlo a ser mayor de lo que es el padre, y establece CSS desbordamiento de los padres a escondidas .

Ejemplo:

img.clipped { 
 
    width: 150%; /*Scales image to 150% width of parent container*/ 
 
    float: left; /*Floats image to left of container - clipping right hand side*/ 
 
    float: right; /*Floats image to right of container - clipping left hand side*/ 
 
} 
 
.container { 
 
    width: 33%; /*Use this to control width of the parent container, hence the image*/ 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="clipped" /> 
 
</div>

Espero que esto ayude ...

Answer 2

¿Quieres decir cortar la imagen? Si es así mira en la propiedad de desbordamiento de CSS. También podría ponerlo en segundo plano y centrarlo en el div

Answer 3

Aquí hay algunas opciones.(Ver la demo de todas estas opciones aquí: http://jsfiddle.net/Squeegy/Gcrdu/)

El primero como una imagen normal de tamaño desconocido. Esto se muestra a cualquier tamaño que sea.

<img src="http://www.google.com/logos/classicplus.png"> 

Pero como resulta que, puede conservar la relación de aspecto de una imagen si ponemos el ancho o sólo la altura. La otra dimensión se ajustará para evitar que las cosas se estiren.

// HTML 
<img src="http://www.google.co.jp/logos/classicplus.png" class="aspectshrink"> 

// CSS 
img.aspectshrink { 
    width: 100px; 
} 

Pero cuando utiliza imágenes de fondo CSS, puede hacer algunos recortes creativos en función de dónde anclar el fondo.

Esto dice "Go"

// HTML 
<div class="cropped-right"></div> 

// CSS 
.cropped-right { 
    width: 100px; 
    height: 100px; 
    background: url(http://www.google.com/logos/classicplus.png); 
    background-position: left center; 
    background-repeat: no-repeat; 
    border: 1px solid red; 
} 

Y esto dice "gle":

// HTML 
<div class="cropped-left"></div> 

// CSS 
.cropped-left { 
    width: 100px; 
    height: 100px; 
    background: url(http://www.google.com/logos/classicplus.png); 
    background-position: right center; 
    background-repeat: no-repeat; 
    border: 1px solid red; 
}; 

Answer 4

Intente utilizar ImageResizer. Aquí está el enlace: http://imageresizing.net/

Answer 5

Añadir esta clase para la etiqueta img HTML, que se mantendrá la imagen tal como es, pero tendrá el espacio necesario especificado ie.40% x 40% sin estirar la imagen

.img{ 
    width:40%; 
    height:40%; //change to whatever your choice 

/*Scale down will take the necessary specified space that is 40% x 40% without stretching the image*/ 
    object-fit:scale-down; 
}