レスポンシブサイトでの画像表示について

皆様こんにちは！

 

あっという間に梅雨に突入―――！！

季節の移り変わりは早いものです。

 

さて、弊社では制作の依頼を受けたお客様に、レスポンシブサイトを強くお勧めしております。

今の時代、スマホで快適に閲覧できないサイトでの集客は難しいですからね！！

弊社でも改良に改良を重ねて、快適なスマホでの閲覧を心掛けてサイト制作をしています。

以前、画像の表示でどうしても美しく表示できない（実サイズより大きく表示されてしまう場合）

SVG画像を使い解消しましたが、これが結構重いファイルでスマホ環境には良くないなぁ・・・と、

常々思っていました。また、その都度AI開いてSVG吐き出すことも、イラレが不得意な私には苦痛でした。

 

で、弊社でJquery　を開発しました。

（正確には外注さんに作成していただいたのですが・・・）

 

画像のある親要素の幅より、

①画像幅が広い場合

その画像を、親要素の100％で表示

②画像幅狭い場合

その画像を、元サイズで表示　します。

 

【HTMLでのscript】

＜画面OPEN 時＞

<script>

$(window).load(function() {

//画像リサイズ
imageSwitch(“.comp_img1“);

});

＜画面幅変更 時＞

$(function(){
// リサイズ確認
var timer1 = false;
$(window).resize(function() {
if (timer1 !== false) {
clearTimeout(timer1);
}
timer1 = setTimeout(function() {

//画像リサイズ
imageSwitch(“.comp_img1″);

}, 200);
});
});

</script>

（画面幅変更 時には、タイマーをかけています。）

 

【HTMLでの呼び出し】

<div class=”comp_img1“><img src=”img/company/comp_01.png” alt=”○○○○○○” /></div>

（クラスcomp_img1　内の画像が自動で幅調整されます。）

 

【CSSでの記述】

.comp_img1  img { width:auto; margin:0 auto; }

(注意：必ず、width:auto をしておくこと）

 

で、最後に

【呼び出されたJqueryの内容】

function imageSwitch( parent ) {　　//parent　にクラス名が入ります。

if( undefined == parent ) {
parent = “.entry-content”;
}

var base = $(parent);
var baseWidth = base.width();
var selector = parent + ” img”;

$(selector).each(function(){

var width = $(this).width();
var avr = width / baseWidth;

if ( 1.0 < avr ) {
$(this).css(“max-width”, “100%”);　//親要素の100％で表示
} else {
$(this).css(“max-width”, “auto”);   //元サイズで表示
}

});

}

 

以上です。ちょっとカタカタしますが

とてもきれいに表示され大満足です。しかも、Jquery初心者の私でも理解しやすい簡単な記述！

 

実は、このサイトのこのブログのフリーアエリアも

このJqueryで対応しています。

画面横幅を変更して下記画像の横幅を確認してみて下さい。

 

 

レスポンシブサイトの画像（特にフリーエリアでのブログの写真等）で

困られている方はお試しあれ！