CSS imagen cambiar el tamaño porcentaje de sí mismo?

HTML:

<span>
    <img src="example.png"/>
</span>

CSS:

span {
    display: inline-block;
}
img {
    width: 50%;
}

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

Cuando se utiliza el enfoque de elemento contenedor, esta pregunta es una variación de esta pregunta. El truco es dejar que el elemento contenedor retraiga la imagen secundaria, para que tenga un tamaño igual al de la imagen sin tamaño. Por lo tanto, al establecer la propiedad width 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 propiedades que habilitan shrinkwrapping 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 él erróneamente lo atribuyó a overflow: hidden.

Demostración en jsfiddle

Editar: Como se mencionó por trojan , también puede tomar ventaja de la recién introducida CSS3 módulo de dimensionamiento intrínseco y extrínseco :

HTML:

<figure>
    <img src="example.png"/>
</figure>

CSS:

figure {
    width: intrinsic;
}
img {
    width: 50%;
}

Sin embargo, no todas las versiones populares del navegador lo soportan en el momento de escribir.

Try zoom property

<img src="..." style="zoom: 0.5" />

Editar: Aparentemente, FireFox no soporta la propiedad zoom. Usted debe utilizar;

-moz-transform: scale(0.5);

Para FireFox.

Esto en realidad es posible, y descubrí cómo por accidente mientras diseñaba mi primer sitio de diseño responsivo a gran escala.

<div class="wrapper">
  <div class="box">
    <img src="/logo.png" alt="">
  </div>
</div>

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

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

.box > img { width:50%; }

El desbordamiento:oculto da la altura y el ancho de la envoltura, a pesar del contenido flotante, sin usar el hack de clearfix. A continuación, puede posicionar su contenido utilizando márgenes. Incluso puedes hacer del wrapper div un bloque en línea.

Otra solución es usar:

<img srcset="example.png 2x">

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

Creo que tienes razón, simplemente no es posible con CSS puro por lo que sé (no cross-browser me refiero).

Editar:

Ok no me gustó mucho mi respuesta, así que me desconcerté un poco. Podría haber encontrado una idea interesante que podría ayudar.. tal vez ES posible después de todo (aunque no la cosa más bonita nunca):

Editar: Probado y trabajando en Chrome, FF e IE 8&9. . No funciona en IE7.

Ejemplo de JsFiddle aquí

Html:

<div id="img_wrap">
    <img id="original_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    <div id="rescaled_img_wrap">
        <img id="rescaled_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    </div>
</div>

Css:

#img_wrap {
    display: inline-block;       
    position:relative;    
}

#rescaled_img_wrap {
    width: 50%;
}
#original_img {
    display: none;
}
#rescaled_img {
    width: 100%;
    height: 100%;
}

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 utiliza 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 basado en parámetros de clase e id.

Para más información, vaya aquí: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

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 la pantalla de resolución estándar.

Así que hay una solución solo HTML para los navegadores modernos:

<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>

Esto le está diciendo al navegador que la imagen es el doble de la dimensión del tamaño de pantalla previsto. Los valores son proporcionales y no necesitan reflejar el tamaño real de la imagen. Uno puede utilizar 2w 1px también para lograr el mismo efecto. El atributo src solo es utilizado por navegadores heredados.

El efecto agradable es que muestra el mismo tamaño en retina o pantalla estándar, encogiéndose en esta última.

Este es un enfoque no difícil:

<div>
    <img src="sample.jpg" />
</div>

then in css:
div {
    position: absolute;
}

img, div {
   width: ##%;
   height: ##%;
}