<img>幅と高さの属性で、幅と高さをパーセンテージで指定できるかどうか疑問に思っていましたか?
まあ、それは明らかだと思います。そうしようとするとサイズが変更されますが、画像の品質が歪んで見えるからです。
固定属性を使用したマークアップの例を次に示します。
<img src="#" width="346" height="413">
ここで、パーセンテージを使用して、これを半分に縮小しようとしています。
<img src="#" width="50%" height="50%">
以下とはまったく異なるものを取得します。
<img src="#" width="173" height="206.5">
2 番目と 3 番目の例では視覚的に顕著な違いがあるため、パーセンテージ マークアップなどを根本的に誤解していると思います。
注: HTML 4.01 を使用していない限り、<img> widthまたは属性としてパーセンテージを直接指定することは無効です (詳細については、現在の仕様、廃止された仕様、およびこの回答を参照してください)。そうは言っても、ブラウザーは多くの場合、後方互換性をサポートするためにそのような動作を許容します。height
2番目の例の幅のパーセンテージ<img>は、画像の実際のサイズではなく、実際にコンテナに適用されています。次のマークアップがあるとします。
<div style="width: 1000px; height: 600px;">
<img src="#" width="50%" height="50%">
</div>
結果の画像は、幅 500 ピクセル、高さ 300 ピクセルになります。
jQueryのサイズ変更
画像を幅の 50% に縮小しようとしている場合は、jQuery のスニペットを使用して実行できます。
$( "img" ).each( function() {
var $img = $( this );
$img.width( $img.width() * .5 );
});
最初に、高さ/幅 = 50% の属性をすべて削除してください。
どちらか一方 (両方ではない) を設定すると、必要な結果が得られます。
<img src="#" height="50%">
違いは次のとおりです。
これにより、画像が元のサイズの半分に設定されます。
<img src="#" width="173" height="206.5">
これにより、画像が使用可能な表示領域の半分に設定されます。
<img src="#" width="50%" height="50%">
たとえば、これをページ上の唯一の要素として配置すると、ページの幅の 50% を占有しようとするため、元のサイズよりも大きくなる可能性があります。元のサイズの半分ではありません。 .
元のサイズよりも大きいサイズで表示されている場合、画像は大幅にピクセル化されて表示されます。
css3 でスケール プロパティを使用してみてください。
元の 75%:
-moz-transform:scale(0.75);
-webkit-transform:scale(0.75);
transform:scale(0.75);
元の 50%:
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
width="50%" and height="50%" は、幅と高さの属性を親要素の幅と高さの半分に設定します。また、幅または高さだけを設定すると、幅または高さを親要素のパーセンテージに設定する必要があります (パーセントを使用している場合)。
元の画像サイズに関する情報が不足しているため、幅と高さのパーセンテージを指定すると、非常に不安定な結果になります。画像がページの特定の場所に収まるようにしたい場合は、サーバー側のコードを使用してその再スケーリングを管理する必要があります。