【bootstrap4】画像を一部表示→ポップアップで全体表示の方法

Question

タイトルについて教えていただきたいです。

例えば、
ある画像の上半分のみをページに表示し、それをクリックするとポップアップとして画像全体が表示される、というものを実現したいです。

これによってサイトにアップロードされた画像の解像度が違っても、スタイルが整った状態にすることを目的としています。

上記の事柄は、実現可能でしょうか？
可能でしたら、方法や調べるための関連ワードを教えていただきたいです。
よろしくお願いします。

Answer 1

Bootstrap で行うのであれば、たとえば以下のように行うことが出来ると思います(動作確認用リンク)。

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <img src="http://placehold.jp/ffa/ffffff/350x250.png" alt data-toggle="modal" data-target="#imageModal1">
      <div class="modal" tabindex="-1" id="imageModal1" role="dialog" aria-labelledby="imageModal1" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">モーダルのタイトル</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
              <img src="http://placehold.jp/ffa/ffffff/350x250.png" alt class="img-fluid mx-auto d-block">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col">
      <img src="http://placehold.jp/faf/ffffff/150x200.png" alt data-toggle="modal" data-target="#imageModal2">
      <div class="modal" tabindex="-1" id="imageModal2" role="dialog" aria-labelledby="imageModal2" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">モーダルのタイトル</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
              <img src="http://placehold.jp/faf/ffffff/150x200.png" alt class="img-fluid mx-auto d-block">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col">
      <img src="http://placehold.jp/faa/ffffff/550x650.png" alt data-toggle="modal" data-target="#imageModal3">
      <div class="modal" tabindex="-1" id="imageModal3" role="dialog" aria-labelledby="imageModal3" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">モーダルのタイトル</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
              <img src="http://placehold.jp/faa/ffffff/550x650.png" alt class="img-fluid mx-auto d-block">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

img[data-toggle="modal"] {
  clip-path: inset(0 0 50% 0);
}

Comments

[退会済みユーザー]

ありがとうございます、非常に助かります。
これは、上下左右から〇〇px(%)切り抜くというものだと認識しています。
元画像の大きさにかかわらず、一定の大きさで表示することは可能なのでしょうか？

[退会済みユーザー]

一定の大きさというのは、全体表示のことでなく、一部表示のことです。

[s8_chu]

このように行うことが出来ると思います。
https://codepen.io/anon/pen/KErjgJ

[退会済みユーザー]

ありがとうございます！全ての問題が解決しました！

Answer 2

可能です。ただし、Bootstrapはあまり関係なく、cssとJavaScript（またはjQuery）をうまく使えば色々な方法が考えられます。

Comments

[退会済みユーザー]

回答ありがとうございます。
例えばどの方法がありますでしょうか。
ポップアップだけならば自分でできそうですが、「一部→全体表示」がわからないのです。