All geek questions in one place

Prevent cropping my image border

Ok, so I have an image and I want a border around it (I can get it). But even if the border "x" is far from my image, the image is still cropped. ONLY CONTINUES WHEN GRAND RADIUS OWN. Hope this made some sense, but here are some images to show what I mean. By the way, if it's somewhere else, it's hard to think of good keywords when there is a border-image-outset property and other crap.

   .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;
}
  <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>
Run codeHide result

Images:

No truncation

Clipping

Winrar logo

+4
source share
6 answers
overflow:none;

on the div that holds your image.

0
source

, .

.image {
   padding: 10px;
}
+2

: hidden: , html, wrapper

.icon_circle {
    padding: 30px;
    border-radius: 90px;
    border: #000 5px solid;
}
  <div class="slideshow">
    <table>
      <tr>
        <td class="icon_circle" ><img width="90px" src="https://i.stack.imgur.com/N2SF1.png" alt=""></td>
        <td class="icon_circle"><img  width="90px" src="https://i.stack.imgur.com/N2SF1.png" alt=""></td>
        <td class="icon_circle"><img 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>
Hide result
+1

, padding border-radius image. SPAN, border img . .

.icon_circle {
  overflow: hidden;
}

span {
  display: block;
  border-radius: 50%;
  padding: 30px;
  border: #000 5px solid;
}
<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>
Hide result
0

div divs 'icon_circle' . . , . = D

    #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;
}
    <div class="slideshow">
    <table>
      <tr>
        <td><div class="icon_circle" ><img src="https://i.stack.imgur.com/N2SF1.png" alt=""></div></td>
        <td><div class="icon_circle" ><img src="https://i.stack.imgur.com/N2SF1.png" alt=""></div></td>
        <td><div class="icon_circle" ><img src="https://i.stack.imgur.com/N2SF1.png" alt=""></div></td> 

      </tr>
    </table>
    <p>Lorem ipdrepnt occaecqui officia deserunt mollit anim id est laborum.</p>
  </div>
Hide result
0
source

Source: https://habr.com/ru/post/1673575/

More articles:


All Articles