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

       
  •  

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

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

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

『見にくいサイト』が完成してしまうわけです。
一応、今から僕が書くのは一番簡単な方法です。
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でしてしてやると画面の大きさによって画像の大きさも変化するので
そのやり方でも可ですが、中には指定できない場合もあるので注意が必要です。

 

       
   
コメントはまだありません

コメントを残す

jsファイルかvue呼び出す
HTML5
Canvasで超簡単に点線・破線を引く方法!JavaScript

こんにちは、 今回はCanvasで点線、破線を簡単に引く方法を ご紹介致します。 なんとリファレンス …

HTML5
Webフォント、Canvasに描写できない。超絶強引だけど描写する方法。

皆さんこんにちは、はせです。今回は、『超強引』にWebフォントがCanvasに描写されない対処法を書 …

HTML5
CSSやJavaScriptが反映されない時の対処法。キャッシュが原因かも。

皆さんこんにちは、はせです。HTMLやPHPその他諸々でCSSやJavaScriptが反映されないと …