¿Cómo puedo cambiar el tamaño de una imagen a un porcentaje de sí mismo con CSS?

7 minutos de lectura

Avatar de usuario de Min Ming Lo
Min Ming Lo

Estoy tratando de cambiar el tamaño de una imagen con un porcentaje de sí mismo. Por ejemplo, solo quiero reducir la imagen a la mitad redimensionándola al 50%. pero aplicando width: 50%; cambiará el tamaño de la imagen para que sea el 50% del elemento contenedor (el elemento principal que tal vez el <body> por ejemplo).

La pregunta es, ¿puedo cambiar el tamaño de la imagen con un porcentaje de sí misma sin usar JavaScript o el lado del servidor? (No tengo información directa del tamaño de la imagen)

Estoy bastante seguro de que no puede hacer esto, pero solo quiero ver si hay una solución inteligente de solo CSS. ¡Gracias!

  • Tomará el porcentaje del elemento contenedor si usaría width: <number>%. ¡No creo que haya una manera de hacerlo!

    – Aniket

    6 de diciembre de 2011 a las 8:45

Avatar de usuario de Vladimir Starkov
Vladímir Starkov

Tengo 2 métodos para ti.

Método 1.

Este método cambia el tamaño de la imagen solo visualmente, no las dimensiones reales en DOM, y el estado visual después del cambio de tamaño centrado en el medio del tamaño original.

img {
  transform: scale(0.5);
}
<img src="https://via.placeholder.com/300x200" />

Nota de soporte del navegador: las estadísticas de los navegadores se muestran en línea en css.

Método 2.

#wrap {
  overflow: hidden;
  position: relative;
  float: left;
}

#wrap img.fake {
  float: left;
  visibility: hidden;
  width: auto;
}

#img_wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#img_wrap img.normal {
  width: 50%;
}
<div id="wrap">
  <img class="fake" src="https://via.placeholder.com/300x200" />
  
  <div id="img_wrap">
    <img class="normal" src="https://via.placeholder.com/300x200/cccccc" />
  </div>
</div>

Nota: img.normal y img.fake es la misma imagen.
Nota de soporte del navegador: Este método funcionará en todos los navegadores, porque todos los navegadores admiten css propiedades utilizadas en el método.

El método funciona de esta manera:

  1. #wrap y #wrap img.fake tener flujo
  2. #wrap posee overflow: hidden para que sus dimensiones sean idénticas a la imagen interior (img.fake)
  3. img.fake es el único elemento dentro #wrap sin que absolute posicionamiento para que no se rompa el segundo escalón
  4. #img_wrap posee absolute posicionamiento en el interior #wrap y se extiende en tamaño a todo el elemento (#wrap)
  5. El resultado del cuarto paso es que #img_wrap Tiene las mismas dimensiones que la imagen.
  6. Configurando width: 50% en img.normalsu tamaño es 50% de #img_wrapy por lo tanto 50% del tamaño de la imagen original.

  • Esto no cambia el tamaño de la imagen al 50% de su tamaño original, ahora es el 50% del padre de img_wrap.

    – Wesley

    25 de mayo de 2012 a las 9:46

  • Vea mi respuesta actualizada para un intento de resolver el problema. ¿Qué piensas?

    – Wesley

    25 de mayo de 2012 a las 10:22

  • Creo que debería ser posible usar display:none en lugar de la visibilidad, como en mi código. En su ejemplo, el espacio para la imagen oculta falsa todavía está ‘reservado’, lo que arruina el flujo si coloca contenido a su alrededor.

    – Wesley

    25 mayo 2012 a las 10:35

  • es imposible, porque el truco principal está en dos etiquetas flotantes y anidadas.

    – Vladímir Starkov

    25 de mayo de 2012 a las 11:08

  • los transform:scale() Sin embargo, la solución tiene un gran problema. No interactúa bien con el modelo de caja CSS. Con lo que quiero decir que no interactúa con él. en absoluto, por lo que obtiene un diseño que se ve mal. Ver: jsfiddle.net/kahen/sGEkt/8

    – Kahen

    4 de febrero de 2013 a las 15:11


Esta tiene que ser una de las soluciones más simples utilizando el enfoque del elemento contenedor.

Cuando se usa el enfoque del elemento contenedor, esta pregunta es una variación de esta pregunta. El truco consiste en dejar que el elemento contenedor ajuste la imagen secundaria, de modo que tenga un tamaño igual al de la imagen sin tamaño. Así, al establecer width propiedad de la imagen como un valor porcentual, la imagen se escala en relación con su escala original.

Algunas de las otras propiedades y valores de propiedad que habilitan el ajuste son: float: left/right, position: fixed y min/max-width, como se menciona en la pregunta vinculada. Cada uno tiene sus propios efectos secundarios, pero display: inline-block sería una opción más segura. Matt ha mencionado float: left/right en su respuesta, pero lo atribuyó erróneamente a overflow: hidden.

span {
  display: inline-block;
}

img {
  width: 50%;
}
<span>
        <img src="https://via.placeholder.com/300x200"/>
    </span>

Editar: Como menciona Trojan, también puede aprovechar la nueva función Módulo de dimensionamiento intrínseco y extrínseco de CSS3:

figure {
  width: intrinsic;
}

img {
  width: 50%;
}
<figure>
  <img src="https://via.placeholder.com/300x200" />
</figure>

Sin embargo, no todas las versiones de navegador populares lo admiten en el momento de escribir este artículo.

  • @¿Alguien puede solucionar que no se colapsen los bordes del tramo? violín

    – CDR

    07/04/2015 a las 14:32

  • Esto era justo lo que necesitaba… algo rápido y sencillo, gracias. Lo usé así: HTML: <img src="https://www.google.com/images/srpr/logo11w.png"/> CSS: img { display: inline-block; width: 15%; }

    – Chnikki

    20 de junio de 2018 a las 21:14

  • Para futuros lectores: el valor correcto a configurar figure es width: fit-content; a partir de ahora. El soporte del navegador también es mucho mejor hoy.

    – Daniel Kis-Nagy

    18 de febrero de 2020 a las 11:06

  • Quiere decir max-content?

    – aindurti

    24 de agosto de 2021 a las 22:48

Avatar de usuario de Emir Akaydın
Emir Akaydin

Escala la imagen:

img {
  transform: scale(0.5);
}
<img src="https://via.placeholder.com/300x200" />

Otra solución es usar:

<img srcset="https://stackoverflow.com/example.png 2x">

No se validará porque el src se requiere atributo, pero funciona (excepto en cualquier versión de IE porque srcset no es apoyado).

Este es un hilo muy antiguo, pero lo encontré mientras buscaba una solución simple para mostrar la captura de pantalla retina (alta resolución) en una pantalla de resolución estándar.

Entonces, hay una solución solo HTML para navegadores modernos:

<img srcset="https://stackoverflow.com/image.jpg 100w" sizes="50px" src="https://stackoverflow.com/questions/8397049/image.jpg"/>

Esto le dice al navegador que la imagen tiene el doble de la dimensión del tamaño de visualización previsto. Los valores son proporcionales y no necesitan reflejar el tamaño real de la imagen. También se puede usar 2w 1px para lograr el mismo efecto. El atributo src solo lo usan los navegadores heredados.

El buen efecto de esto es que muestra el mismo tamaño en retina o pantalla estándar, encogiéndose en este último.

avatar de usuario de isherwood
isherwood

Esto realmente es posible, y lo descubrí por accidente mientras diseñaba mi primer sitio de diseño receptivo a gran escala.

El overflow:hidden le da al envoltorio alto y ancho, a pesar de los contenidos flotantes, sin usar el truco clearfix. Luego puede posicionar su contenido usando márgenes. Incluso puede hacer que el contenedor div sea un bloque en línea.

.wrapper {
  position: relative;
  overflow: hidden;
}

.box {
  float: left; /* Note: 'float:right' would work too */
}

.box>img {
  width: 50%;
}
<div class="wrapper">
  <div class="box">
    <img src="https://via.placeholder.com/300x200" alt="">
  </div>
</div>

Avatar de usuario de Jenny Vallon
Jenny Vallón

function shrinkImage(idOrClass, className, percentShrinkage){
'use strict';
    $(idOrClass+className).each(function(){
        var shrunkenWidth=this.naturalWidth;
        var shrunkenHeight=this.naturalHeight;
        $(this).height(shrunkenWidth*percentShrinkage);
        $(this).height(shrunkenHeight*percentShrinkage);
    });
};

$(document).ready(function(){
    'use strict';
     shrinkImage(".","anyClass",.5);  //CHANGE THE VALUES HERE ONLY. 
});

Esta solución usa js y jquery y cambia el tamaño basándose solo en las propiedades de la imagen y no en el padre. Puede cambiar el tamaño de una sola imagen o un grupo en función de los parámetros de clase e identificación.

para más, vaya aquí: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

¿Ha sido útil esta solución?