提前感谢您的阅读。
我不确定如何解释我的问题,但我会首先链接一些图片以便您有一个想法,之后我会进一步解释并添加一些代码。
我将为我的圈子及其容器提供CSS:
.circle-container {
width: 68%;
height: 100%;
float: left;
background: url(img.jpg);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-right: 100px;
}
.circle {
float:left;
height:100%;
width:33%;
border: #A93932 solid 4px;
border-radius:50%;
background-color:rgb(227,5,19);
background-color:rgba(227,5,19,0.8);
}
显然上面的CSS没有使它成为一个圆圈,请看下面的脚本我是怎么做到的:
让圈子响应的脚本:
$(window).resize(function() {
$('.circle').css('height', $('.circle').width());
if($('.circle').height() > $(window).height())
{
$('.circle').css('height', $(window).height());
$('.circle').css('width', $(window).height());
}
});
$(document).ready(function() {
$('.circle').css('height', $('.circle').width());
if($('.circle').height() > $(window).height())
{
$('.circle').css('height', $(window).height());
$('.circle').css('width', $(window).height());
}
});
如果还有CSS或者需要HTML,我希望听到它!
谢谢!