web-dev-qa-db-ja.com

HTMLで写真の縦横比を歪めることなく、幅と高さをパーセンテージで指定する

幅と高さの属性で、幅と高さをパーセンテージで指定できるかどうか疑問に思っていましたか？

私はそうしようとすると、サイズが変更されますが、画像の品質を歪めるように見えるので、それは明らかだと思います。

固定属性を使用したマークアップの例を次に示します。

<img src="#" width="346" height="413">

さて、パーセンテージでこれを半分に縮小しようとしていますが：

<img src="#" width="50%" height="50%">

私は完全に異なるものを手に入れます：

<img src="#" width="173" height="206.5">

2番目と3番目の例には視覚的に顕著な違いがあるため、パーセンテージマークアップなどを根本的に間違えていると思います。

UPDATE：すべての有用な投稿に感謝します！

Patが提案したjQueryの提案が本当に好きです。なぜなら、彼が提案した1つのスニペットで、セレクターを実際に変更して、fancyboxの影響を受けるすべての画像に適用できるからです。

$('img.FancyBox').each(function(){
  $(this).width($(this).width() * 0.25);
});

なんてすごい！

あなたは私のサイトでここでライブ効果をチェックできます： http://www.marioplanet.com/product.htm

SQL Server dbに接続したら、その1つのjQueryスニペットを製品ページのすべてのFancyBoxクラスの画像に適用できるという事実を考慮すると、かなりうまく機能します。

みんなありがとう！

htmlimageresizesize
53
Qcom

2番目の例のこれらのパーセント幅は、<img>が含まれるコンテナに実際に適用され、画像の実際のサイズではありません。次のマークアップがあるとします。

<div style="width: 1000px; height: 600px;">
    <img src="#" width="50%" height="50%">
</div>

結果の画像は、幅500ピクセル、高さ300ピクセルになります。

jQuery Resize

画像をその幅の50％に縮小しようとしている場合は、jQueryのスニペットでそれを行うことができます。

$( "img" ).each( function() {
    var $img = $( this );
    $img.width( $img.width() * .5 );
});

まず、高さ/幅= 50％の属性を必ず外してください。

59
Pat

どちらか（両方ではなく）を設定することができ、それで希望する結果が得られます。

<img src="#" height="50%">
20
Fosco

違いは次のとおりです。

これにより、画像が元のサイズの半分に設定されます。

<img src="#" width="173" height="206.5">

これにより、使用可能なプレゼンテーション領域の半分に画像が設定されます。

<img src="#" width="50%" height="50%">

たとえば、これをページ上の唯一の要素として配置すると、ページの幅の50％を占有しようとするため、潜在的に元のサイズより大きくなる可能性があります-元のサイズの半分ではありません。

元のサイズよりも大きく表示されている場合、画像は非常にピクセル化されて表示されます。

5
Fenton

width = "50％"およびheight = "50％"は、幅と高さの属性を、間違えなければ親要素の幅と高さの半分に設定します。また、パーセントを使用している場合、幅または高さだけを設定すると、幅または高さを親要素のパーセンテージに設定する必要があります。

2
pkauko

元の画像サイズに関する情報が不足しているため、幅と高さの割合を指定すると、非常に不安定な結果になります。画像がページの特定の場所に収まるようにする場合は、サーバー側のコードを使用してそのスケーリングを管理する必要があります。

2
Lazarus

Css3でscaleプロパティを使用してみてください。

オリジナルの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);
2
Nalan Madheswaran

W3Schools から

含む要素のパーセント単位の高さ（「20％」など）。

だから私はそれらがdivが入っている要素を意味すると思う？

1
JavaPete