Question

我已经使用JQuery在Bootstrap 4轮播内部创建了模式图像。问题是当我打开它时，它不在屏幕中央。父母之间的哪个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>

Answer 2

您已经将样式硬编码到类modal-content上。尝试删除样式，它应该可以正常工作。

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

在这里拨弄：https://jsfiddle.net/2ofkxa8r/

使模态图像居中：要为哪个<div>设置样式？

2 个答案: