Question

我试图用圆形div包装图像，但我无法弄清楚我做错了什么。我的div是圆形的，但是我希望我的图像适合圆形盒子，但是为什么它不合适为什么它会外出，我是html和css的新手。以下是我在下面分享的代码，可以帮助我。

＆＃13;

body {
  background: #F6F6F6;
}
.wrapper {
  width: 200px;
  height: 200px;
  border: 6px solid #19ab8c;
  border-radius: 100%;
  margin: 0 auto;
  margin-top: 40px;
  box-shadow: 0 0 5px #ccc;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div class="wrapper">
      <img src="https://pbs.twimg.com/profile_images/567285191169687553/7kg_TF4l.jpeg" width="200"/>
    </div>
  </body>
</html>

＆＃13;

Answer 1

您可以在.wrapper类中使用overflow: hidden;尝试下面的代码片段

＆＃13;

body {
  background: #F6F6F6;
}
.wrapper {
  width: 200px;
  height: 200px;
  border: 6px solid #19ab8c;
  border-radius: 100%;
  margin: 0 auto;
  margin-top: 40px;
  box-shadow: 0 0 5px #ccc;
  overflow: hidden;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div class="wrapper">
      <img src="https://pbs.twimg.com/profile_images/567285191169687553/7kg_TF4l.jpeg" width="200"/>
    </div>
  </body>
</html>

＆＃13;

Answer 2

只需直接将包装中的img定位到.wrapper img并将边框阴影和border-radius应用于它

   

 body {
      background: #F6F6F6;
    }

.wrapper {
      width: 200px;
      height: 200px;
      margin: 0 auto;
      margin-top: 40px;
   
  
    }
    .wrapper img{
      border: 6px solid #19ab8c;
      border-radius: 100%;
     box-shadow: 0 0 5px #ccc;
  
    }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div class="wrapper">
      <img src="https://pbs.twimg.com/profile_images/567285191169687553/7kg_TF4l.jpeg" width="200"/>
    </div>
  </body>
</html>

Answer 3

只需将包装器设置为overflow：hidden;

见下文

body {
  background: #F6F6F6;
}
.wrapper {
  width: 200px;
  height: 200px;
  border: 6px solid #19ab8c;
  border-radius: 100%;
  margin: 0 auto;
  margin-top: 40px;
  box-shadow: 0 0 5px #ccc;
  overflow: hidden;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div class="wrapper">
      <img src="https://pbs.twimg.com/profile_images/567285191169687553/7kg_TF4l.jpeg" width="200"/>
    </div>
  </body>
</html>

Answer 4

我希望这会对你有所帮助

.wrapper { 
border: 6px solid #19ab8c; 
border-radius: 100%; 
margin: 0 auto; 
margin-top: 40px; 
box-shadow: 0 0 5px #ccc; 
}

.wrapper img {
width:100%;
height:auto;
}

解决方案2：

还有一件事是从包装div中删除宽度高度，或根据图像大小增加两者

解决方案3：

您还可以修复图像标记上的宽度和高度，然后从包装类中删除。

<img width="200" height="200" src="">

图像不适合圆形div？它已离开div

4 个答案: