回答:
私には2つの方法があります。
このメソッドは、画像のサイズを視覚的にのみ変更し、DOMの実際のサイズではなく、サイズ変更後の視覚的な状態を元のサイズの中央に中央揃えします。
html：
<img class="fake" src="example.png" />css：
img {
-webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
-moz-transform: scale(0.5); /* FF3.5+ */
-ms-transform: scale(0.5); /* IE9 */
-o-transform: scale(0.5); /* Opera 10.5+ */
transform: scale(0.5);
/* IE6–IE9 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}ブラウザーサポートのメモ：ブラウザーの統計はインラインで表示されましたcss。
html：
<div id="wrap">
<img class="fake" src="example.png" />
<div id="img_wrap">
<img class="normal" src="example.png" />
</div>
</div>css：
#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%;
}注： img.normalとimg.fake同じ画像です。
ブラウザーサポートのメモ：すべてのブラウザーcssがメソッドで使用されるプロパティをサポートするため、このメソッドはすべてのブラウザーで機能します。
#wrapそして#wrap img.fake流れがある#wrap有するoverflow: hidden（その寸法は、内側画像と同一であるようにimg.fake）img.fake唯一の要素の内部はある#wrapなしでabsolute、それは第二段階を壊さないように配置します#img_wrapabsolute内部に配置#wrapされ、要素全体にサイズが拡張されます（#wrap）#img_wrap、イメージと同じサイズになります。width: 50%on img.normalに設定すると、そのサイズは50%になる#img_wrapため50%、元の画像サイズになります。transform:scale()解決策には大きな問題があります。CSSボックスモデルとうまく相互作用しません。これによって、私はそれはそれと相互作用しないという意味では、すべてのあなたはすべて間違って見えるレイアウトを取得しますので、。参照：jsfiddle.net/kahen/sGEkt/8
HTML：
<span>
<img src="example.png"/>
</span>CSS：
span {
display: inline-block;
}
img {
width: 50%;
}これは、コンテナ要素アプローチを使用する最も簡単なソリューションの1つである必要があります。
コンテナ要素のアプローチを使用している場合、この質問はのバリエーションであるこの質問。秘訣は、コンテナ要素に子画像をシュリンクラップさせることです。これにより、サイズがサイズ変更されていない画像と同じになります。したがって、widthイメージのプロパティをパーセンテージ値として設定すると、イメージは元のスケールを基準にしてスケーリングされます。
：他のshrinkwrapping有効化プロパティとプロパティ値のいくつかはfloat: left/right、position: fixedおよびmin/max-widthリンク質問で述べたように、。それぞれに独自の副作用display: inline-blockがありますが、より安全な選択です。マットはfloat: left/right彼の答えで言及したが、彼はそれを誤ってに帰したoverflow: hidden。
編集： trojanで述べたように、新しく導入されたCSS3の組み込みおよび外部のサイジングモジュールを利用することもできます。
HTML：
<figure>
<img src="example.png"/>
</figure>CSS：
figure {
width: intrinsic;
}
img {
width: 50%;
}<img src="https://www.google.com/images/srpr/logo11w.png"/> CSS： img { display: inline-block; width: 15%; }
figureありwidth: fit-content;、今のよう。ブラウザのサポートも、今日ははるかに優れています。
zoomプロパティを試す
<img src="..." style="zoom: 0.5" />編集：どうやら、FireFoxはzoomプロパティをサポートしていません。使用する必要があります。
-moz-transform: scale(0.5);FireFox用。
これは実際に可能であり、私が最初の大規模なレスポンシブデザインサイトを設計しているときに、偶然にかなりの偶然を発見しました。
<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%; }overflow：hiddenは、clearfixハックを使用せずに、フローティングコンテンツにもかかわらず、ラッパーの高さと幅を提供します。その後、マージンを使用してコンテンツを配置できます。ラッパーdivをインラインブロックにすることもできます。
これは非常に古いスレッドですが、標準解像度のディスプレイに網膜（高解像度）のスクリーンキャプチャを表示するための簡単な解決策を探しているときに見つかりました。
したがって、最新のブラウザにはHTMLのみのソリューションがあります。
<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>これは、画像が意図した表示サイズの2倍であることをブラウザに伝えています。値は比例しており、画像の実際のサイズを反映する必要はありません。2w 1pxを使用しても同じ効果が得られます。src属性は、レガシーブラウザでのみ使用されます。
それの素晴らしい効果は、網膜または標準ディスプレイで同じサイズを表示し、後者で縮小することです。
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.
});このソリューションでは、jsとjqueryを使用し、親ではなく画像のプロパティのみに基づいてサイズを変更します。クラスとidパラメーターを使用して、単一の画像またはグループのサイズを変更できます。
詳細については、https：//gist.github.com/jennyvallon/eca68dc78c3f257c5df5をご覧ください。
実際、ここでの答えのほとんどは、画像をそれ自体の幅に実際に拡大縮小するものではありません。
img元のサイズから開始できるように、要素自体の幅と高さをautoにする必要があります。
その後、コンテナー要素は画像を拡大縮小します。
簡単なHTMLの例：
<figure>
<img src="your-image@2x.png" />
</figure>そしてここにCSSルールがあります。この場合、絶対コンテナーを使用します。
figure {
position: absolute;
left: 0;
top: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
transform-origin: left;
}
figure img {
width: auto;
height: auto;
}のようなルールで画像の配置を微調整することができますtransform: translate(0%, -50%);。
私が知っている限り、それは純粋なCSSでは不可能です（つまり、クロスブラウザではありません）。
編集：
OK答えがあまり好きではなかったので、少し戸惑いました。私は助けることができる興味深いアイデアを見つけたかもしれません。
編集：テスト済みで、Chrome、FF、IE 8＆9で動作します。。IE7では動作しません。
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%;
}inline-block。そのため、幅#img_wrapは内部のHTMLの幅だけでなく、コンテキストコンテナーの幅にも依存します。
width: <number>%。それを行う方法はないと思います！