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

2019-06-162019-12-29スタイルシート（CSS）

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

パノラマ画像とは

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

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

※実際の画像

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

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

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

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>

CSSの解説

１．画像のCSSを解除

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

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

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

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

２．要素（記事）の最大幅を指定

.panorama{
overflow: auto; /*はみ出た部分をスクロール。スクロールバーの表示*/
width:710px; /*記事の幅に設定*/
height: 526px; /*画像の高さに「26」を足した数字。*/
}

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

３．パノラマ画像のサイズを指定（実際のサイズが異なる場合）

img.pano{
width:2000px;
height:500px;
}

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

当サイトの場合、

@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;
}}

５．スマホ端末での見え方を制御（必要な場合のみ）

@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 で強制 */
}
}

注意点

追加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/

オーガニックレストラン＆ベーカリー ボン ブエーノ ボーノ | Bon Bueno Buono

滋賀県 栗東市 草津駅 小柿 にあるオーガニックレストラン。無添加・無農薬にこだわり、厳選された食材 ...

 https://bonbuenobuono.com/