web-dev-qa-db-ja.com

HTML画像の幅と高さを％でスケーリング

HTML画像のwidthプロパティとheightプロパティは<img src="Debian.jpg" style="height: 120px; width: 130px">で簡単に設定できることを知っています。私が探しているのは、%の値を1つだけ受け取り、元の画像の幅と高さをその%に応じてスケーリングする単一のCSSプロパティが存在するかどうかです。たとえば、Debian.jpgの高さと幅が1000x700で、CSSプロパティで50%を指定すると、画像は500x350に縮小され、アスペクト比が維持されます。 。高さと幅を個別に調整しながら画像の縦横比を維持するのは非常に困難です。そのようなプロパティが存在しない場合、アスペクト比を維持して画像の望ましい寸法を実現する方法はありますか？

javascripthtmlcssimage
17
Arun Suryan

私の提案は、指定したサイズを削除することです。はい、cssで指定できるコードがあります。 HTMLではそのようにします：

<img src="Debian.jpg" alt="Debian Image" class="myCustomImages">

cSSではそのようなことをします：

.myCustomImages {
  max-width: 50%;
  max-height: 50%;
}
2
Asma AL-Khaldi

解決策は本当に簡単です。アスペクト比を維持するには、次のようにCSSプロパティの高さと幅を設定するだけです。

#theImage {
  width: 100%;
  height: auto;
}
<img id="theImage" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">

Widthプロパティを100％に設定することで、使用可能な水平方向のスペースをすべて占めるように画像に指示しています。 heightプロパティをautoに設定すると、画像の高さが幅に比例して変化し、アスペクト比が維持されます。最終結果は、完全に拡大または縮小する画像です。

このソリューションの欠点は、コンテンツが表示される解像度の範囲全体で1つの画像を効果的に表示できないことです。 より包括的なソリューションの場合、適切なタイミングでメディアクエリとさまざまなサイズの画像を取り込み、低解像度の画像を置き換える必要があります

2
TRK

だから私が理解しているように、元のサイズのパーセンテージでスケールを定義しながら、画像のアスペクト比を維持したいとします。以下は私の提案です：

画像がdisplay: inline-blockのコンテナ内にある場合、CSSで画像の幅を定義でき、それはそれ自体に相対的です（親がdisplay: blockを持っている場合、それはその親に相対的になります、 display:inlineの場合は、最も近いブロックの親を基準にしています）。

次元の1つ（widthまたはheight）を定義し、他の要素を定義しない場合、デフォルトではアスペクト比が維持されます。

だから私がすることを提案するのは、inline-block親で画像をラップし、パーセンテージで幅のみを定義することです。このような：

div {
  display: inline-block;
}
#half {
    width: 50%;
}
#original {
    width: 100%;
}
#big {
    width: 150%;
}
<h1>Image 400X267</h1>
<h3>50% size</h3>
<div>
<img id="half" src="https://bloximages.newyork1.vip.townnews.com/unionleader.com/content/tncms/assets/v3/editorial/f/f4/ff44150d-01ca-5e2d-8f7d-9d17e9faadd4/5dfa95339e09c.image.jpg?resize=400%2C267"/>
</div>
<h3>100% size</h3>
<div>
<img id="original" src="https://bloximages.newyork1.vip.townnews.com/unionleader.com/content/tncms/assets/v3/editorial/f/f4/ff44150d-01ca-5e2d-8f7d-9d17e9faadd4/5dfa95339e09c.image.jpg?resize=400%2C267"/>
</div>
<h3>150% size</h3>
<div>
<img id="big" src="https://bloximages.newyork1.vip.townnews.com/unionleader.com/content/tncms/assets/v3/editorial/f/f4/ff44150d-01ca-5e2d-8f7d-9d17e9faadd4/5dfa95339e09c.image.jpg?resize=400%2C267"/>
</div>
1
Yosef Tukachinsky