Question

使用Bootstrap 4，我试图在较小的div中添加图像，并希望将图像居中并隐藏溢出父div的区域。我怎么能这样做？

这是一个片段：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
  <div class="col-md-6 px-0">
    <img src="https://i.stack.imgur.com/COO8G.jpg">
    <h1 class="display-4 font-italic">Sample</h1>
    <p class="lead my-3">Sample Text</p>
    <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Sample</a></p>
  </div>
</div>

修改：图像已作为子项添加到div col-md-6 px-0，以使其响应。

编辑2：我不想更改图片的大小。我想保持大小，在父div中垂直和水平居中，并隐藏流过的部分。

Answer 1

使用网格系统类justify-content-center，查看文档here

Answer 2

你可以使用绝对定位，我建议在容器中添加一个类以进行相对定位

＆＃13;

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.col-md-6.px-0 {
  position: relative;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
    <div class="col-md-6 px-0">
      <img src="http://experienceperception.com/images/moe1700_2.jpg">
      <h1 class="display-4 font-italic">Sample</h1>
      <p class="lead my-3">Sample Text</p>
      <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Sample</a></p>
    </div>
  </div>

＆＃13;

最好将一个类添加到容器中

<div class="col-md-6 px-0 abs-center">

然后

.abs-center {
  position: relative;
}

在初始加载时水平和垂直居中图像，如果您正在尝试实现其他目的，请更新问题

Answer 3

尝试以下代码段。我给图像提供了100％的宽度和高度。由于它位于容器内，因此图像将仅放大到容器中。我在评论中看到你想要缩放图像。所以我也添加了一个bootstrap模式。

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

img {
  width:100%;
  height:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
  <div class="col-md-6 px-0">
  <a href="#" class="pop">
    <img src="http://experienceperception.com/images/moe1700_2.jpg"></a>
    <h1 class="display-4 font-italic">Sample</h1>
    <p class="lead my-3">Sample Text</p>
    <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Sample</a></p>
  </div>
</div>


<!--Zoom image with a modal-->

<div class="modal fade" 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 src="" class="imagepreview" style="width: 100%;" >
      </div>
    </div>
  </div>
</div>

如何将较大的图像置于较小的div中？

3 个答案: