¿Cambiar el tamaño de la imagen proporcionalmente usando CSS?

107

He estado intentando durante un par de días configurar mi galería de miniaturas para que todas las imágenes aparezcan con la misma altura y ancho. Sin embargo, cuando cambio el código Css a,

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

Obtengo imágenes que son todas del mismo tamaño pero la relación de aspecto se estira arruinando las imágenes. ¿No hay una manera de cambiar el tamaño del contenedor de imágenes y no de la imagen? permitiéndome mantener la relación de aspecto. pero cambie el tamaño de la imagen todavía. (No me importa si corto parte de la imagen).

¡Gracias por adelantado!

html css gallery lightbox Gorro
fuente

Respuestas:

184

este es un problema conocido con el cambio de tamaño de CSS, a menos que todas las imágenes tengan la misma proporción, no tiene forma de hacerlo a través de CSS.

El mejor enfoque sería tener un contenedor y cambiar el tamaño de una de las dimensiones (siempre la misma) de las imágenes. En mi ejemplo cambié el tamaño del ancho.

Si el contenedor tiene una dimensión específica (en mi ejemplo, el ancho), al decirle a la imagen que tenga el ancho al 100%, lo convertirá en el ancho completo del contenedor. La autoaltura hará que la imagen tenga una altura proporcional al nuevo ancho.

Ex:

HTML:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}
jackJoe
fuente
41

Debe fijar un lado (por ejemplo, la altura) y fijar el otro en auto.

P.ej 

 height: 120px;
 width: auto;

Eso escalaría la imagen en función de un solo lado. Si encuentra aceptable recortar la imagen, puede configurar

overflow: hidden;

al elemento padre, que recortaría todo lo que de otro modo excedería su tamaño.

Nick Andriopoulos
fuente
He intentado esto, pero todavía me da imágenes de diferentes tamaños y formas. Quiero que la galería sea uniforme así, [] [] [] [] no como [] [] [] [] []
Beaniie
2
use una combinación de los dos anteriores: establezca la altura en un número (con ancho automático para mantener la escala) y limite el padre a un ancho específico overflow: hiddenpara recortar el exceso
Nick Andriopoulos
25

Puede usar la object-fitpropiedad css3, algo como

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>
Expandir fragmento

Sin embargo, no es exactamente su respuesta, ya que no estira el contenedor, pero se comporta como la galería y puede seguir estilizándolo img.

Otro inconveniente de esta solución sigue siendo un soporte deficiente de la propiedad css3. Más detalles están disponibles aquí: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ . La solución jQuery también se puede encontrar allí.

dmitry_romanov
fuente
Gracias, buena solución. :)
Bibhu
¿Es un poco extraño responder con una propiedad que solo se admite en el cajero automático de opera? caniuse.com/object-fit
Simon Dragsbæk
4
Veo tu punto, @Simon, gracias. Mencioné que no tengo idea de si la propiedad será compatible en todas partes, pero incluso si no , podemos usarla como punto de partida para buscar alternativas en Google que la reemplacen. Otra razón para publicar es que la respuesta se quedaría por algún tiempo mientras los navegadores mejoran cada día, así que respondí que también tenía como objetivo este futuro cercano .
dmitry_romanov
1
Al llegar a esta página varios años después, ¡estaba feliz de encontrar esta respuesta de 'futuro'!
petzi
8

Para hacer que las imágenes sean ajustables / flexibles, puede usar esto:

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}
Stanislav
fuente
5

Ponlo como fondo en tu soporte, por ejemplo.

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height:120px;">
&nbsp;
</div>

Esto centrará su imagen dentro de un div de 120x120 cortando cualquier exceso de la imagen

DickieBoy
fuente
2

Si no desea estirar la imagen, colóquela en el contenedor div sin desbordamiento y céntrela ajustando su margen si es necesario.

  1. La imagen no se recortará
  2. La relación de aspecto también seguirá siendo la misma.

HTML:

<div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

CSS:

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}
Bhushan Dangore
fuente
-1

si conoce la relación de espectros, puede usar padding-bottom con porcentaje para establecer la altura dependiendo de la diferencia. 

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>
reco
fuente