戯れ言葉

スマホ対応のレスポンシブ 画像のサイズ指定は

カテゴリ:レスポンシブ
タグ:

 2017/02/08 色々不具合があり修正

 せっかく可変幅にしたのですが、過去に貼付けた画像が旨く縦横比を保ったまま小さくなってくれません。
 で、色々試行錯誤の結果、良好なのが次の様な方法でした。

 私のブログは、画像に枠線を付けるているのでCSS に下記のように書いてます。

.entry_body img {
  max-width: 97%;
  height: auto;
  /* 画像に枠 -------- */
    margin: 5px 1em;/* すべての画像の左右にスペース */
    padding: 5px;
    background-color:#fff;
    border: solid 1px rgba(203, 214, 208, 1);
  /* ----------------- */
}

 max-width が 97% になってるのは画像より外側に枠線が書かれ、それが記事中からはみ出さないようにする為です。

2017 03 02
 下記のように訂正:この方が全てに渡って巧くいくようです。

  max-width: 100%;
  margin: 5px auto;


 で、FC2ブログの編集画面で高機能エディタをオフにして、ファイル挿入(山にお日様?)の 「この画像で記事を書く」 で画像を貼り付けると、

<a href="https://blog-imgs-88.fc2.com/b/l/g/blgid1974/20160212101.jpg"
 target="_blank">
<img src="https://blog-imgs-88.fc2.com/b/l/g/blgid1974/20160212101.jpg"
 alt="20160212101.jpg" border="0" width="1200" height="800" /></a>

 と、HTML にこんな風に挿入されます。
 いくつもの画像を記事中に同じ横幅で納まるようにするのに、多機能画面でいちいちマウスで画像をドラッグするのは面倒なので、HTMLで1画像のある箇所だけを書替えて他の画像のHTMLへコピペしていくのが便利ですが、
 HTML5 では img タグの中に border="0" というプロパティを書いてはいけないと言うことになったとか、 width height 属性で%の指定とかもできなくなったので、これも一緒に直してしまいます。
 上の画像の HTML の様に、この辺りは赤色の部分のように旨い具合にひとかたまりになってます。
 1画像分の HTML で border="0" を消し、 width 1200 から 92% に、 height 800 から auto に書替え、style属性で囲みます。
 更に最後の / もHTML5 的には不要なので消すことに。

 最後の部分はこうなります。

 style="width: 92%; height: auto;"></a>
 
 これをコピーして、
 後は残りの画像のHTML で、
 border="0" width="1200" height="800" /></a>
 と、この部分を全部選んで、ペーストして書替えてしまいます。

 文字高の height auto にしておくと、ブラウザの横幅が狭められた時、画像の高さも元の画像の縦横比(アスペクト比)に従って揃ってしまうのでとても便利です。

 画像の横幅指定を width: 600px; の様に数値指定するのはブラウザの横幅が狭められた時、色々思わぬ表示になるのでおもしろくありません。

 で、過去記事の画像は暇な時に一寸ずつ書替えなければ。(ノω・、)

Comments 0

There are no comments yet.

Leave a reply
コメントをどうぞ

ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます