人気の株主優待

weblovelog

ウェブ業界人のためのウェブ情報サイト。

ウインドウ幅に合わせて拡大縮小する画像のCSS【レスポンシブWebデザイン】

   

 

解説

max-width:100%;

ウィンドウ幅に合わせて、画像幅が拡大・縮小されます。

 

height: auto;

max-widthだけを指定すると横幅だけが変化してしてしまい、縦横比が崩れ結果下の写真のように、画像がつぶれて表示されてしまいます。

inu

ですので、height: auto; を指定し、高さを自動調整できるように設定しましょう。

 

注意!
max-widthプロパティは古いIEでは正しく機能しません。
機能させるためには別途「IE8対応」が必要になります。

 - CSS, WEB, レスポンシブウェブデザイン

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事