HTML CSS隐藏图像的溢出部分

Question

I am new to Web Development. And I am having a problem. This is the image i am talking about:

How do i set whatever part of the image outside of the div to invisible? Or should i crop the picture

Here is a copy of the code

<div style="height:200px; width:200px; border-radius:100px; border:2px solid blue;text-align:center;"> 
<img src="../pics/2.jpg" style="height:180px;">
</div>

Answer 1

Try putting overflow:hidden into the div 's styling, as shown:

<div style="overflow:hidden; height:200px; width:200px; border-radius:100px; border:2px solid blue;text-align:center;"> 
   <img src="../pics/2.jpg" style="height:180px;">
</div>

Answer 2

应用overflow: hidden到父<div>