Textpattern CMS

#1 2021-03-20 10:02:57

Gallex

Member

Registered: 2006-10-08

Posts: 1,289

CSS: border issue

why .img-box > div height is 330px at this site? its should be 300px as width. i know it’s somehow related with border width, cause if i remove border, the height and width are 300px.

.img-box > div{
top:40px;
padding-bottom:100%;
width: 100%;
border-radius:50%;
border:15px solid #fff;
overflow:hidden;
position: relative;
z-index:5;
}
.img-box img {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
-o-object-fit: cover;
object-fit: cover;
}

#2 2021-03-20 11:36:41

phiw13

Plugin Author

From: Japan

Registered: 2004-02-27

Posts: 3,078

Website

Re: CSS: border issue

The width of your box is 300px, but then you have to subtract 30px border-width set on the .img-box > div to compute the actual width. The height does not have those constrains.

Make your life slightly easier, and move border + border-radius from img-box > div to img-box img.

---

Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

#3 2021-03-20 11:44:37

Gallex

Member

Registered: 2006-10-08

Posts: 1,289

Re: CSS: border issue

phiw13 wrote #329376:

Make your life slightly easier, and move border + border-radius from img-box > div to img-box img.

thank’s! ;)