html - CSS:不同屏幕分辨率的方形按钮

Question

您好，想将按钮显示为正方形。如果我使用像素比屏幕分辨率有问题。如果我使用百分比，则比例不正确

你知道怎么做吗？

.serviceButton{
    position:absolute;
    left: 20%;
    top: 20%;
    width: 300px; //if I use this than the sqaure is small
    height: 300px; // in big screen resolutions
}


<div>
    <button type="button" class="serviceButton">Services</button>
</div>

Answer 1

有一篇关于此的精彩博文 here .它可能会满足您的需求，它甚至会在您缩小窗口时缩小。

这是您需要的 html:

<div class="box square"> 
    <div class="content">Aspect ratio of 1:1</div> 
</div>

并将其添加为您的 CSS:

.box {
    position: relative;
    width: 50%;     /* desired width */
}
.box:before {
    content: "";
    display: block;
}
.square {
    padding-top: 100%; /* Play with this value for different ratios */
}
.content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}