3月
3

CSSで縦横比を維持したまま画像をリサイズする方法

By admin  //  CSS  //  No Comments
ホームページ上で画像を表示する場合、
通常は表示する画像のサイズにあらかじめサイズを変更しておいて配置するのが望ましい。
HTMLやCSSでサイズを変えて画面上では小さく表示されていても、
実際には一度オリジナルの画像を読み込むことになるので読み込みの際のデータ量が大きくなり無駄が多い。
また、ブラウザ上でリサイズした場合はリサイズの質が悪い。
とはいえ、状況によっては大きな画像を画面上で小さくしたい場合もあるでしょう。
CSSを使った画像のリサイズ方法を紹介します。

CSSの細かい前提知識は今後このブログで紹介していきます。
画像を指定する場合、高さ、幅のどちらかを基準にしてサイズを決めると思いますが、
決めたサイズのもう片方、高さが決まれば幅、幅が決まれば高さを計算しないといけません。
一般的にCSSで画像を縦横比を維持したままリサイズする場合には、
わからないほうのサイズをautoとすることで、
自動的に計算して縦横比を維持したままリサイズすることが出来ます。
/* 例として幅を200pxにする */
img
{
    width:200px;
    height:auto;
}
/* 例として高さを200pxにする */
img
{
    width:auto;
    height:200px;
}
かわいい動物

Leave a comment

↓サーバーを借りるなら↓
サーバーについてはこちら


↓ドメインをとるなら↓
ドメインについてはこちら

↓ネットショップを始めるなら↓

人気の記事