html - que - Cambiar el tamaño de la imagen proporcionalmente con CSS?

tamaño imagen proporcional html 5

Question

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

Lo estoy haciendo a través de JavaScript, pero solo trato de ver si esto es posible con CSS.

Answer 1

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

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

Answer 2

Creo que esta es la forma más fácil de hacerlo, también es posible mediante el uso del atributo de style línea dentro de la etiqueta <img> .

.scaled
{
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}

<img src="flower.png" class="scaled">

o

<img src="flower.png" style="transform: scale(0.7);">

Answer 3

Las propiedades de css max-width y max-height funcionan muy bien , pero no son compatibles con IE6 y creo que IE7. Desearía usar esto en altura / anchura para no escalar una imagen accidentalmente. Solo querría limitar la altura / anchura máxima proporcionalmente.

Answer 4

Para escalar una imagen manteniendo su relación de aspecto.

Prueba esto,

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

Answer 5

Para redimensionar la imagen proporcionalmente usando CSS:

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

Answer 6

Podemos cambiar el tamaño de la imagen usando CSS en el navegador mediante consultas de medios y el principio de diseño responsivo.

    @media screen and (orientation: portrait) {
img.ri {
    max-width: 80%;
  }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 80%; }
}

Answer 7

Prueba esto:

div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}

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

Answer 8

Puede utilizar la propiedad de ajuste de objeto :

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

Esto encajará en la imagen, sin cambiar la proporcionalmente.

Answer 9

Revisado en 2015:

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

Lo he revisado ya que todos los navegadores comunes ahora tienen el auto de trabajo sugerido por Cherif arriba, por lo que funciona incluso mejor, ya que no es necesario saber si la imagen es más ancha que alta.

versión anterior: si está limitado por el cuadro de 120x100, por ejemplo, puede hacerlo

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

Answer 10

Si es una imagen de fondo, usa background-size: contener.

Ejemplo css:

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

Answer 11

Siempre necesitas algo como esto.

html
{
    width: 100%;
    height: 100%;
}

en la parte superior de su archivo css

Answer 12

Tenga en cuenta que el width:50% lo redimensionará al 50% del espacio disponible para la imagen, mientras que max-width:50% redimensionará la imagen al 50% de su tamaño natural . Es muy importante tener esto en cuenta al usar estas reglas para el diseño web móvil, por lo que para el diseño web móvil siempre se debe utilizar el max-width .

Answer 13

Tratar

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

Answer 14

Utilice esta técnica de escalado fácil

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}

Answer 15

image_tag("/icons/icon.gif", height: ''32'', width: ''32'') Necesito configurar la altura: ''50px'', ancho: ''50px'' a la etiqueta de imagen y este código funciona desde el primer intento. Intenté todo el código anterior, pero no tuve suerte, así que este funciona y aquí está mi código de mi _nav.html.erb:
<%= image_tag("#{current_user.image}", height: ''50px'', width: ''50px'') %>

Answer 16

<img style="width: 50%;" src="..." />

funcionó bien para mí ... ¿O me estoy perdiendo algo?

Edit: Pero vea la advertencia de Shawn sobre el cambio de tamaño accidentalmente.

Answer 17

img {
    max-width:100%;
}

div {
    width:100px;
}

Con este fragmento puedes hacerlo de una manera más eficiente.

Answer 18

img{
    max-width:100%;
    object-fit: scale-down;
}

funciona para mi. Reduce las imágenes más grandes para que quepan en el cuadro, pero deja las imágenes más pequeñas en su tamaño original.