自调整CSS边框宽度[重复]答案

【问题标题】：Self adjustable CSS border width [duplicate]自调整CSS边框宽度[重复]
【发布时间】：2015-02-25 17:43:04
【问题描述】：

我有一个 div 元素，例如：

<div style="height: 10%; width: 20%; border: 1px solid black">
     Div Content
</div>

由于上面的 div 有 % 的高度和宽度，我希望在调整元素大小时也调整边框宽度。看起来除了像素之外没有办法指定边框宽度。那么有没有关于如何调整边框宽度的想法？

【问题讨论】：

我会使用媒体查询。根据宽度窗口为容器设置不同的边框宽度值。

标签： javascript jquery html css

【解决方案1】：

您可以使用 jQuery。例如：var x = $(".div-class").width() or .height 现在您有了 div 的高度或宽度（以像素为单位）。进行一些计算以获得边框高度。例如，我们需要 10% 的高度。 var borderHeight = x *0.1; 现在只给 div $("div-name").css("border-size",borderHeight + "px");

【讨论】：

【解决方案2】：

您可以使用百分比填充和带有背景颜色的包装器来做到这一点：

<div class="wrapper">
    <div class="content">
         Div Content
     </div>
 </div> 

.wrapper {
    background: #000;
    padding: 1%;
    width: 20%;
    height: 10%;
}

.content {
    background: #fff;
}

jsfiddle 链接：http://jsfiddle.net/rckbk9p6/

【讨论】：