横画像の幅は１００％のまま、高さだけを縮小し、画像内容を中央にフィットさせる
※テーマのCSSを更新しました。ブラウザキャッシュのクリアをお願いします。
こちらは通常の貼っただけの原画です。
ブログ記事のＨＴＭＬ編集にて、対象の画像を<div class="coverflexphoto"></div>で囲います。
<div class="coverflexphoto">
<p><img class="hatena-fotolife" ～はてばブログの画像～></p>
</div>
ブラウザの画面の高さ5０％に自動で画像の高さを合わせてくれます。
(※画像サイズの高さを5０％にするのでなく、表示中のブラウザ画面のその高さ5０％内に収める。)
ただし、上下部分がカットされ、画像内容が中央でフィットされ表示されます。
これにより画面内にスクロールさせず、おおよそ２枚の画像を収めることが出来ます。
coverflexphotoを適用した２枚の画像
※幅100％のまま、２枚の画像をスクロールさせずに、おおよそ画面に収まるよう画像の高さが調整されます。
