はてなブログテーマ「Flex PhotoGraph2」

写真系ブログ向けテーマ(旧Flex PhotoGraphのバージョンアップ版)

縦長の画像が間延びしてしまう場合のご提案

※テーマのCSSを更新しました。ブラウザキャッシュのクリアをお願いします。

 

ブログ記事のHTML編集にて、対象の画像を<div class="vhflexphoto"></div>で囲います。

 

<div class="vhflexphoto">

 <p><img class="hatena-fotolife" ~はてばブログの画像~></p>

</div>

 

ブラウザの画面の高さの90%に自動で画像の高さを合わせてくれます。

(※画像サイズの高さを90%にするのでなく、表示中のブラウザ画面のその高さ90%内に収める。)

これにスクロールさせずに画面内に画像を収めることができます。

縦長の画像が間延びしてしまう場合にお使い下さい。

 

<div class="vhflexphoto"></div>で囲った画像

※ブラウザ画面の高さ内に自動で収まってくれる。

f:id:tommyoctopas:20171005094212j:plain

 

70%バージョン"vhflexphoto70"も用意しました。

f:id:tommyoctopas:20171005094212j:plain

 

そのまま貼り付けただけの画像

※画像が大きいので、スクロールが必要になってしまいます。

f:id:tommyoctopas:20171005094212j:plain