【CSS】画像の大きさをウインドウ幅に合わせて自動的に拡大縮小させる方法

cssの使い方
SPONSORED LINK
LINEで送る
Share on LinkedIn
Pocket

画像の大きさをウインドウ幅に合わせて自動的に拡大縮小させる方法

 

画像がウインドウに対して拡大しすぎたり小さくなりすぎたりすることを防ぐCSSの記述になります。

 

 

HTML

pタグの中に画像(img要素)が1つ含まれています。

 

 

CSS

この記述は拡大しすぎたり縮小しすぎたりする場合があります。

 

CSS

「auto」を指定することで縦横比を維持して、拡大・縮小します。

 

 

画像本来の大きよりも大きく表示させない方法(ウインドウ幅に合わせて表示)

 

max-widthで横幅の最大値を100%にしておきます。

・描画領域の幅が狭い場合には、横幅一杯に収まるように縮小され表示します。

・描画領域の幅がわかれば原寸で表示します。

画像原寸サイズより大きく表示されることはありません。

 

 

画像は原寸サイズ、拡大縮小せず表示可能な範囲だけ見せる方法

 

CSS

hiddenを指定することで、ブロックからはみ出る部分を非表示にできます。描画領域より画像の方が大きい場合でも見える範囲だけ表示されます。画像は原寸のまま。

 

 

LINEで送る
Share on LinkedIn
Pocket

よく読まれている記事

SPONSORED LINK
cssの使い方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です