Question

我已经创建了一些响应的html但我很难让圈子响应屏幕尺寸。

我想让屏幕缩小时缩小圆圈。

这是我的Fiddle来展示我的工作

<div class="container">
        <div class="col-lg-12 image-container">
            <div class="left">
                <a href="#"><img src="img/cover2.jpg" alt="Cover 1"></a>
            </div>
            <div class="center">
                    <button type="button" class="btn btn-default btn-lg arrow-left">
                         <span class="glyphicon glyphicon-chevron-left"></span>
                    </button>
                    <button type="button" class="btn btn-default btn-lg arrow-right">
                         <span class="glyphicon glyphicon-chevron-right"></span>
                    </button>
                    <a href="#"><img src="img/cover1.jpg" alt="Cover 1"></a>
             </div>
            <div class="right">
                     <a href="#"><img src="img/cover3.jpg" alt="Cover 1"></a>
             </div>

        </div>

        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="information-wrap">
                    <h1>Issue Number:</h1>
                    <h2>Information about Magazine</h2>
                    <h3>More information..</h3>
                </div>
                <div class="more-info-wrap">
                      <a class="btn btn-primary btn-large magazine-open">Open</a>
                </div>


            </div>
        </div>

Answer 1

您可以按百分比设置圈子的width和height。

另外，要将圈子保持在中间位置，您可以使用left和right属性的负百分比，如下所示：

.arrow-right{
    position: absolute;
    top: 45%;
    right: -10%;   /* <-- keep the circle center horizontally */
    width: 20%;    /* <-- Set the width by percentage  */
    height: 20%;   /* <-- Set the height by percentage */
    border-radius: 50%;
    box-shadow: 1px -1px 28px 5px rgba(0,0,0,0.75);
}

.arrow-left{
    position: absolute;
    top: 45%;
    left: -10%;    /* <-- keep the circle center horizontally */
    width: 20%;    /* <-- Set the width by percentage  */
    height: 20%;   /* <-- Set the height by percentage */
    border-radius: 50%;
    box-shadow: 1px -1px 28px 5px rgba(0,0,0,0.75);
}

<强> JSFiddle Demo

Answer 2

将height和width更改为percentages

.arrow-right,.arrow-left{
height:34%;
width:34%;
}

工作fiddle

制作响应屏幕宽度的圆圈

2 个答案: