Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

  1. Index
  2. » How?
  3. » CSS: border issue

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

Gallex
Member
Registered: 2006-10-08
Posts: 1,202

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;
}

Offline

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

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,347
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 ?

Offline

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

Gallex
Member
Registered: 2006-10-08
Posts: 1,202

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! ;)

Offline

  1. Index
  2. » How?
  3. » CSS: border issue

Board footer

Powered by FluxBB