# 画像をクリックし拡大して表示する方法

**URL:** <https://www.nocode-faq.com/t/topic/1437>\
**Category:** レスポンシブ\
**Tags:** ツールの操作方法\
**Created:** [2021 年 4 月 16 日午後 4:33 UTC](https://www.nocode-faq.com/t/topic/1437 "2021-04-16T16:33:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![yamashin0418](https://avatars.discourse-cdn.com/v4/letter/y/e68b1a/32.png) [@yamashin0418](https://www.nocode-faq.com/u/yamashin0418)\
**Post date:** [2021 年 4 月 16 日午後 4:33 UTC](https://www.nocode-faq.com/t/topic/1437/1 "2021-04-16T16:33:42Z")

</div>

やりたいこと：  
画像をクリックし拡大してレスポンシブに表示したい。

困っていること：  
現在下記Gyazoリンクにあるように、RepeatingGroupで並んでいる画像をクリックすると、ポップアップを表示し、そのポップアップ上にwonderfulImageSliderプラグインを用いて画像を表示しています。大画面であれば、比較的違和感なく表示されるのですが、スマホサイズだとポップアップの下に空白が発生してしまいます。  
何か解決策のヒントをご教授いただけいると幸いです。

> **[Gyazo](https://gyazo.com/50c207b70dcc06ea97a591afeea248c1)**

---

<div class="post-metadata">

**Author:** ![NoCodeNinja](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/nocodeninja/32/2115_2.png) [@NoCodeNinja](https://www.nocode-faq.com/u/NoCodeNinja)\
**Post date:** [2021 年 4 月 17 日午前 12:55 UTC](https://www.nocode-faq.com/t/topic/1437/2 "2021-04-17T00:55:43Z")

</div>

最適な方法かはわかりませんが、デスクトップ用とスマホ用のPOPUPをそれぞれ用意して、only whenにて「Current page width ≦ 500」などを設定して切り替える仕様はいかがかなぁと感じました👀

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/5cf4142825f241c5ec7ca5f9039e576142efe391.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/1/1c74669c5afc783d136a3fd0cfbd4095e09428f2.png)

---

<div class="post-metadata">

**Author:** ![yamashin0418](https://avatars.discourse-cdn.com/v4/letter/y/e68b1a/32.png) [@yamashin0418](https://www.nocode-faq.com/u/yamashin0418)\
**Post date:** [2021 年 4 月 18 日午前 6:24 UTC](https://www.nocode-faq.com/t/topic/1437/3 "2021-04-18T06:24:32Z")

</div>

ありがとうございます。その方法で対応してみます！