Pregunta Cambiar el tamaño de la imagen proporcionalmente con CSS?


¿Hay alguna manera de redimensionar (reducir) las imágenes proporcionalmente usando SOLO CSS?

Estoy haciendo JavaScript, pero solo estoy tratando de ver si esto es posible con CSS.


583
2018-04-24 23:40


origen


Respuestas:


Para cambiar el tamaño de la imagen proporcionalmente usando CSS:

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

675
2018-04-26 08:28



Controlar el tamaño y mantener la proporción:

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

193
2018-03-19 14:17



Si se trata de una imagen de fondo, use background-size: contains.

Ejemplo css:

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}

95
2017-12-20 17:30



Tratar

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);

66
2018-01-17 02:49



Darse cuenta de width:50% lo redimensionará a 50% del espacio disponible para la imagen, mientras max-width:50% cambiará el tamaño de la imagen a 50% de su tamaño natural. Esto es muy importante a tener en cuenta al usar estas reglas para el diseño web móvil, por lo que para el diseño web móvil max-width siempre debe ser utilizado.


48
2017-09-29 15:07



Para escalar una imagen manteniendo su relación de aspecto

Prueba esto,

img {
  max-width:100%;
  height:auto;
}

40
2017-12-10 18:01



Puedes usar ajuste de objeto propiedad:

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

Esto se ajustará a la imagen, sin cambiar proporcionalmente.


31
2017-09-08 16:19



Revisado en 2015:

<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">

Lo volví a visitar, ya que todos los navegadores comunes ahora funcionan automáticamente sugeridos por Cherif, por lo que funcionan aún mejor ya que no es necesario saber si la imagen es más ancha que más alta.

versión antigua: Si está limitado por una caja de 120x100, por ejemplo, puede hacer

<img src="http://image.url" height="100" style="max-width: 120px">

30
2018-01-12 17:43