もう一人のY君

読者です 読者をやめる 読者になる 読者になる

もう一人のY君

iPhoneアプリのレビューやアップデートレビューなどを書いています. たまに数学の記事も書きます.

もう一人のY君 MENU

はてなブログをレスポンシブにした場合の画像貼り付けで注意すること

雑記 雑記-Web・ブログ

スポンサーリンク


 160201_38

 まぁ注意すべきは自分だったわけですが.

 

[Contents]
 

 

レスポンシブに変えた後, 一部画像のアスペクト比がおかしくなる

thetheorier.hatenablog.com

 先日スマホでもPCのように見せるためレスポンシブ対応させたところでした.

 

 

160201_39

 するとまぁこんな感じで, 画像が押しつぶされるものがいくつか出てきたんですね.

 

 

160201_40

 しかし横向きにすると大丈夫.

 

 

height属性が原因

 もう上の事実からこれが原因であることは簡単に分かりました.

 

thetheorier.hatenablog.com

 自分は基本的に画像はflickrにアップしてそこから貼ってるんですが, その際

 …とこんな感じに貼ってるわけです.

 

 160129_30

 結果はこんな感じ.

 PCやタブレット, スマホの横向き画面では問題なく見えていると思います.

 

 

 このようにwidth, height両方を指定していると, widthのサイズ次第ではレスポンシブ指定のmax-widthにひっかかり, 表示される横幅が指定したwidthの値より小さくなってしまったんでしょう.

 しかしheightはそのままなので, このように左右が押しつぶされたと思われます.

 

 

height属性を外してみた

 ならばwidth, heightのどちらか一方にすれば良いのでは?

 でもPC版…というかスマホ縦向き以外のことを考えると残すのはwidthだろう…ということで, height属性を外してみました.

 

 

 160129_30

 結果はこの通り, 縦向きのスマートフォンからでも問題なく見えていると思います.

 

 

 たったこれだけのことですが気付けて良かったです.

 もっち(id:setuyakuhappylife)さん, ご心配をおかけしましたが問題解決しました!

 

 改めてレスポンシブ化で参考にさせて頂いたエントリーの紹介をば.

 

happylife-tsubuyaki.hatenablog.com

 

 またソースコードの埋め込みはものくろぼっくす様のエントリーを参考に採用しました.

mono96.jp

 こういうの使いたかったんです…

 ググッても中々良いのが見つからなかったので助かりました!

 

 

(´-`).。oO(今から全部の画像修正するのは面倒だから過去記事のはもういいや…)