【レスポンシブ対応】CSSでパノラマ画像をスクロール付きでウェブサイトに埋め込む方法「ルクセリタス以外もOK」

スタイルシート(CSS)

「パノラマ写真をホームページに表示して欲しいのですが・・」とのご依頼を頂いた時のメモです。

スポンサーリンク

パノラマ画像とは

横に長いなが~い画像です。

普通に表示させると記事内(画面幅)にぴったり収まります。
※レスポンシブデザインのテーマの場合。

パノラマ画像 例

これでは実際の画像ではとても小さくなってしまうので、スクロール付きで埋め込む方法をご紹介いたします。

※実際の画像
ボンブエーノボーノ様 店内パノラマ画像

ご紹介する方法での埋め込み

★横方向にスクロール出来ます。

パノラマ画像2000×500px

パノラマ画像を任意の大きさで横方向にのみスクロール出来るように埋め込む

HTML と CSS

HTML

<div class="panorama">
<img class="pano" src="/images/panoramaimg2000.jpg" alt="パノラマ画像2000×500px" width="2000" height="500" />
</div>

CSS

#main img{
max-width: initial;
}
.panorama{
overflow: auto;
width:710px;
height: 526px;
}
img.pano{
width:2000px;
height:500px;
}
@media screen and (min-width:992px) and (max-width:1199px){
.panorama{
overflow: auto;
max-width:530px;
max-height:526px;
}
}
@media screen and (min-width:768px) and (max-width:991px){
.panorama{
overflow: auto;
max-width:676px;
max-height:526px;
}
}
@media screen and (max-width:767px){
.panorama{
overflow: auto;
max-width:100%;
max-height:526px;
}
}
@media screen and (max-width:599px){
.panorama{
overflow: auto;
max-width:100%;
max-height:376px;
}
img.pano{
width:1400px;
height:350px !important;
}
}

解説

HTMLの解説

<div class="panorama">
<img class="pano" src="/images/panoramaimg2000.jpg" alt="パノラマ画像2000×500px" width="2000" height="500" />
</div>
埋め込みたい画像を「panorama」で囲み、画像に class を付けて class名を「pano」としています。

CSSの解説

1.画像のCSSを解除

まずは、記事内の画像に掛かっているCSSを「initial」を使って解除します。
(自動でレスポンシブに対応している場合)

当サイトの場合は、「#main img」 になりますが、「.entry-contents img」 など、テンプレートによって変わりますので「Chrome デベロッパーツール F12」などで要素を調べて下さい。

#main img{
max-width: initial; /* 最大幅の制御を解除 */
}

これで、最大幅の解除ができます。効かない場合は下記をお試し下さい。

#main img{
all:initial; /* 初期状態にリセット */
}

2.要素(記事)の最大幅を指定

当サイトの記事幅は、画面幅「1200px以上の場合710px」になっております。
.panorama{
overflow: auto; /*はみ出た部分をスクロール。スクロールバーの表示*/
width:710px; /*記事の幅に設定*/
height: 526px; /*画像の高さに「26」を足した数字。*/
}

【height: 526px】下に表示されるスクロールバーの高さ考慮することで、縦方向のスクロールバーが表示されません。

3.パノラマ画像のサイズを指定(実際のサイズが異なる場合)

img.pano{
width:2000px;
height:500px;
}
実際のサイズが 4000×1000px であれば、上記の様に比率を同じにしてサイズを指定してあげましょう。

4.サイトのブレイクポイントに合わせて横幅を調整。

レスポンシブデザインの場合、端末によって記事の最大幅が変わりますのでそれに合わせて要素の横幅を指定する必要があります。

当サイトの場合、

@media screen and (min-width:992px) and (max-width:1199px){
.panorama{overflow: auto;
max-width:530px; /* 992px~1199px の間は530px */
max-height:526px;
}}
@media screen and (min-width:768px) and (max-width:991px){
.panorama{overflow: auto;
max-width:676px; /* 768px~991px の間は676px */
max-height:526px;
}}
@media screen and (max-width:767px){
.panorama{overflow: auto;
max-width:100%; /* ~767pxまでは画面幅に合わせる */
max-height:526px;
}}

5.スマホ端末での見え方を制御(必要な場合のみ)

iPhone8での見え方

スマホで見た際に、画像の高さが500pxだと大きく感じるので350pxに変更しています。それに合わせて要素も変更しています。
@media screen and (max-width:599px){
.panorama{ /*画面幅 599px 以下の設定*/
overflow: auto;
max-width:100%;
max-height:376px; /*画像の高さに26をプラスした値*/
}
img.pano{
width:1400px; /*比率計算すると横幅は1400px */
height:350px !important; /* 効かないので !important で強制 */
}
}

注意点

一番最初に、「max-width: initial; /* 最大幅の制御を解除 */」または、「all:initial; /* 初期状態にリセット */」を使用しています。

記事内すべての画像に適用されますので、パノラマ画像とそれ以外の画像を同時に使う場合は、以降にCSSを追記してあげる必要があります。

追加CSSの例

#main img{
max-width: initial;
}
img.responsive{ /*クラス名 「responsive」 が付いた画像の制御 */
max-width:100%; /*画面幅に合わせる*/
height:auto; /*高さは自動調整 */
margin:15px 0; /*上下に15pxずつ余白を空ける */
}

html例

<img class="responsive" src="/images/sample.jpg" alt="サンプル画像" width="600" height="400" />

参考になれば幸いです。

実際に埋め込みさせて頂いたページはこちらです。

https://bonbuenobuono.com/

スポンサーリンク