CSS圈 - 响应

时间:2014-01-16 18:18:04

标签: css scale geometry

我正在使用Bones WP主题作为首发。我有三个圆圈,放在一个3列布局内(每列一个圆圈)。每个圆圈的构建如下:

HTML

<a href="#" class="services">Text</a>

CSS

a.services{
margin:40px 0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width:320px;
height:320px;
border:20px solid #e5f2f7;
border-radius:100%;
text-align:center;
display:inline-block;
}

我正在声明圆圈的大小(320px X 320px),因此这不适用于移动设备。我想用百分比来做这件事。

因为我的HTML所在的列是响应式的,所以我应该可以使用100%的宽度 - 但是如何在调整大小时确保高度保持等于宽度?在某些断裂点,它变成一个细长的椭圆形。

1 个答案:

答案 0 :(得分:3)

我遵循了这篇文章:http://www.mademyday.de/css-height-equals-width-with-pure-css.html

这是一个非常棒的解决方案。

CSS

.box{
position: relative;
width: 50%;     /* desired width */
}

.box:before{
content: "";
display: block;
padding-top: 100%;  /* initial ratio of 1:1*/
}

感谢您将我与它联系起来!