画像などの『縦』、『横』の比を維持したまま大きさを変える方法

 こんにちは、はせです。
みなさんは、ブログやホームページ作成、画像編集などはやっていますか?
僕は、この『暇人のブログ』をやっているのですが、
やはりブログはずらずら文章ばかり並んでも、見る側としては
あまり良くはないですね。
僕は、画像などがありわかりやすいサイトがあるまで検索してしまう派です!

なので僕も、画像を貼り、、、、貼り、、っ

ますが、最近では、スマホが普及しており、
気軽にみられて、アクセス数を稼ぐにはスマホユーザ向けにも対策をしないと
損をすることになるでしょう。
となれば、パソコンユーザー向けに大きさ指定した画像は
スマホから見ると画面からはみ出して

『見にくいサイト』が完成してしまうわけです。
一応、今から僕が書くのは一番簡単な方法です。
11.jpg
FC2でいうと高機能エディタを使えば自動で比を維持したまま大小することができます。

<a href=“http://hasethblog.com/wp-content/uploads/2018/07/11.jpg” target=“_blank”>
<
img alt=“11.jpg” border=“0” width=“500” height=“375”
src=“http://hasethblog.com/wp-content/uploads/2018/07//11.jpg” /></a>

一応画像の背景はこのような感じになっています。
大抵 width(横幅)を400~450に抑えればスマホでも余裕で見ることができます。
しかし、ここだけ変えては height(高さ)は?となってしまいます。

なぜかというと、横だけ大きさを変えて縦は維持してしまうと
縦に伸びたような画像になってしまうからです。

ここで、大切なのが 縦と横の『比』ですね
ということで
どちらか基準を決めます!
例えば今回は width(横幅)を変化させます
そして heightのところ ””で囲まれたところを 『auto』(自動)と打ち込みます。
つまり
width=”450″ height=”auto“となるわけですね!

11.jpg
と比を維持したままサイズを変更できました!!

他のやり方は

pxでサイズ指定をせず dpでしてしてやると画面の大きさによって画像の大きさも変化するので
そのやり方でも可ですが、中には指定できない場合もあるので注意が必要です。

コメント

スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました