CSSで画像をリサイズして表示突撃日記凸（風俗レポ＆AVレビュー）

オススメAV記事！

CSSで画像をリサイズして表示

update : 2012-12-03　　カテゴリ : IT徒然日記

« new : 「風俗: チェリー＠柏 12/03（月）（ピンサロ）」 home old : 「tumblrに篠崎愛の写真をアップ！（１）」 »

こないだtumblrでは下記のようなことを悩んでいてCSSで解決出来たのですが。

tumblrのCSSメモ

横幅が700以上ある画像は横幅700pxちょうどにフィットしてして表示されます。これはいいのですが、横幅が700px以下の画像でも横幅700pxに拡大されて表示されるのです。横幅が小さい画像だとかなり拡大されてドットが荒く、汚く見えてしまいます。

これを横幅700px未満の画像では元画像のサイズで表示されるようにしたいのです。
で、色々CSS調べてようやく方法が分かりました。

これと同じようなことをFC2のこのブログでやりたいのです。
というのはtumblrに篠崎愛の写真をアップ！（１）という記事にtumblrのimgタグをそのままコピペして貼っていたのですのですが。。。

元画像が大きい場合、真ん中のmain記事の表示領域（横幅620pxぐらい）から画像が大きいとはみ出て表示されてしまっていたのです。横幅620px以上の画像は縮小して表示が出来ないかな…しかもimgタグでただ小さくすると無理やり縮小で画像汚くなるよな…。FC2のこのブログ…というかこのテンプレートのスタイルシート？では上記のtumblrような方法じゃ無理かな…と調べていたら！

見つけました。そして何とかなりました。

CSSだけで画像のリサイズを処理する（IE6に対応させて、しかもハイクオリティ）完全版 - くらげだらけ（くだくらげのBLOG）

<style type="text/css">
.image-resize {
	max-width: 200px;
	max-height: 200px;
}
* html body .image-resize {
	width: expression(this.width >= this.height ? "200px" : "auto");
	height: expression(this.width <= this.height ? "200px" : "auto");
}
</style>

<img src="images/test-image.jpg" class="image-resize" />

↑
こんな感じ。本ブログでは620pxにしました。imgタグ毎にclassの設定も必要になりますが。

<img src="images/test-image.jpg" class="image-resize" />

サイズでかくて横幅はみ出てしまう画像の時だけclassを入れればいいかな。

で、後はそうだハイクォリティ縮小のことも書いてありました。IEとかだと縮小汚いらしいので。下記のCSSも追加しておきました。

img {
	-ms-interpolation-mode: bicubic;
}

上記対応の後、tumblrに篠崎愛の写真をアップ！（１）を見てみたら。

成功！問題無し！
もっとこのブログのCSS自体を根本から操作する必要があるかと思ったらそうでもなく、簡単に行きました。

メイン記事内の大きい画像のみにCSSを効かせるようにしなきゃな…とか色々調べてました。
今回使用したCSSですが、CSS的にはこのブログの画像全部、に影響しちまうので本当は良くないかな…とも思ったのですが、620pxより大きかったら、ていう設定にしちゃえばそんな大きい画像はメイン記事内でたまにしか表示しないので問題無し、ってな感じです。

ありがとうございました。

関連記事

update : 2012-12-03　　カテゴリ : IT徒然日記

管理人のオススメエロサイトです！

Pagetop