jquery - 将模态图像居中 : which <div> to style?

Question

我使用 JQuery 在 Bootstrap 4 轮播中创建了模态图像。问题是当我打开它时，它不在屏幕中央。 parent 之间的哪个div是样式以及如何？另外，要在较小的屏幕上使其成比例(响应式)，如何设置图像大小的样式？

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">      
      <img class="pop d-block" src="images/getonboard.png" alt="First slide">
    </div>
  <div>
  <a class="carousel-control-prev" href="javascript:void(0) role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="javascript:void(0) role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


<!-- Modal Images Link -->


<!-- Geton Modal -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria- 
   labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div style="width: 800px; height: 500px;" class="modal-content">              
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal"><span aria- 
          hidden="true">&times;</span><span class="sr-only">Close</span> 
         </button>
        <img src="images/getonboard.png" class="imagepreview" style="width: 
         100%;" >
      </div>
    </div>
  </div>
</div>



$(function() {
    $('.pop').on('click', function() {
      $('.imagepreview').attr('src', $(this).find('img').attr('src'));
      $('#imagemodal').modal('show');   
    });   
});

Answer 1

您已将内联样式添加到模态内容。这就是它不居中的原因。

<div style="width: 800px; height: 500px;" class="modal-content">

删除它们并改用媒体查询。

“img-fluid”类使图像获得父元素的整个宽度。

<img class="img-fluid" src="https://cdn.pixabay.com/photo/2017/03/26/16/06/architecture-2175925_960_720.jpg" class="imagepreview" >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">      
      <img class="pop d-block" src="https://cdn.pixabay.com/photo/2017/03/26/16/06/architecture-2175925_960_720.jpg" alt="First slide">
    </div>
  <div>
  <a class="carousel-control-prev" href="javascript:void(0)" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="javascript:void(0)" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


<!-- Modal Images Link -->


<!-- Geton Modal -->
<div class="modal fade show" style="display: block" id="imagemodal" tabindex="-1" role="dialog" aria- 
   labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">              
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal"><span aria- 
          hidden="true">&times;</span><span class="sr-only">Close</span> 
         </button>
        <img class="img-fluid" src="https://cdn.pixabay.com/photo/2017/03/26/16/06/architecture-2175925_960_720.jpg" class="imagepreview" >
      </div>
    </div>
  </div>
</div>