防止边框裁剪我的图像

Question

好的，我有一张图片，我想要一个边框轮廓（我可以得到）。但即使边界是＆＃39; x＆＃39;远离我的图像，图像仍然被剪裁。 仅在设置了BORDER-RADIUS属性时才会发生。希望，这有点意义，但这里有一些图像来表明我的意思。顺便说一下，如果这是其他任何地方，那么当出现边界图像开头属性和其他废话时，很难想出好的关键词。

＆＃13;

＆＃13;

   .slideshow {
   display: none;
   margin-top: -50px;
   font-size: 25px;
   }

.slideshow table {
  width: 100%;
}

.slideshow table tr td {
  text-align: center;
}

.icon_circle {
  overflow: hidden;
}

td span {
  display: block;
  border-radius: 90px;
  padding: 30px;
  border: #000 5px solid;
}

＆＃13;

  <div class="slideshow">
    <table>
      <tr>
        <td><img class="icon_circle" width="90px" src="https://i.stack.imgur.com/N2SF1.png" alt=""></td>
        <td><img class="icon_circle" width="90px" src="https://i.stack.imgur.com/N2SF1.png" alt=""></td>
        <td><img class="icon_circle" width="90px"  src="https://i.stack.imgur.com/N2SF1.png" alt=""></td>
      </tr>
    </table>
    <p>Lorem ipdrepnt occaecqui officia deserunt mollit anim id est laborum.</p>
  </div>

＆＃13;

＆＃13;

＆＃13;

图片：

否修剪

剪辑

Winrar logo

Answer 1

在图像中添加填充，例如

.image {
   padding: 10px;
}

Answer 2

如果您只是删除溢出：隐藏：它不应该剪辑，您应该更改html以使包装元素上的类

 http://localhost:8010/%E0%A4%9C%E0%A4%B2%E0%A5%8D%E0%A4%A6-%E0%A4%B8%E0%A4%BF%E0%A4%B2%E0%A5%8D%E0%A4%B5%E0%A4%B0-%E0%A4%B8%E0%A5%8D%E0%A4%95%E0%A5%8D%E0%A4%B0%E0%A5%80%E0%A4%A8-%E0%A4%AA%E0%A4%B0-%E0%A4%A6%E0%A4%BF/

.icon_circle {
    padding: 30px;
    border-radius: 90px;
    border: #000 5px solid;
}

Answer 3

将这些css属性提供给td标记，而不是<img>

例如 https://jsfiddle.net/kqogcLk4/

Answer 4

overflow:none;

关于持有你形象的div。

Answer 5

这是因为您正在向padding本身提供border-radius和image。相反，添加SPAN标记，在其中添加border属性和插入img标记。它会为您提供所需的输出。

＆＃13;

＆＃13;

.icon_circle {
  overflow: hidden;
}

span {
  display: block;
  border-radius: 50%;
  padding: 30px;
  border: #000 5px solid;
}

＆＃13;

<div class="slideshow">
  <table>
    <tr>
      <td><span>
        <img class="icon_circle" width="90px" src="https://i.stack.imgur.com/N2SF1.png" alt="">
        </span></td>
      <td><span><img class="icon_circle" width="90px" src="https://i.stack.imgur.com/N2SF1.png" alt=""></span></td>
      <td><span><img class="icon_circle" width="90px"  src="https://i.stack.imgur.com/N2SF1.png" alt=""></span></td>
    </tr>
  </table>
  <p>Lorem ipdrepnt occaecqui officia deserunt mollit anim id est laborum.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 6

将图像放在div中并给div“'icon_circle”类修复它。不得不添加一些额外的属性。这是遇到相同问题的任何人的工作代码。 = d

power-select

    #boxes .box img{
  height: 90px;
}
  .slideshow {
  display: none;
  margin-top: -50px;
  font-size: 25px;
}

.slideshow table {
  width: 100%;
}

.slideshow table tr td {
  text-align: center;
}

.icon_circle {
  display: table;
  margin: 0 auto;
  display: block;
  width: 90px;
  padding: 25px;
  border-radius: 250px;
  border: #000 5px solid;
}