如何在较小的div中将大图像居中？

Question

Using Bootstrap 4, I am trying to add a image inside of a smaller div and want to center the image and hide the area that overflow the parent div. How can I do this?

Here is a snippet:

 <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> 

Edit: The image was added as a child to the div col-md-6 px-0 in an effort to make it responsive.

Edit 2: I don't want to change the size of the image. I want to keep the size, center it vertically and horizontally within the parent div, and hide the parts that are flowing over.

Answer 1

使用网格系统类justify-content-center ，请在此处查看文档

Answer 2

You can use absolute positioning, I would suggest to add a class to the container for relative positioning

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

 <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> 

Best to add a class to the container

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

and then

.abs-center {
  position: relative;
}

This centers the image horizontally and vertically on initial load, if you are trying to achieve something else, please update the question

Answer 3

Try the following snippet. I have given 100% width and height to the image. Since it is inside a container, the image will be enlarged up to the container only. And I saw in comments that you want the image to be zoom. So I added a bootstrap modal as well.

 $(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>