javascript - 响应圆图像？

我正在尝试制作一个响应式网页。
我已使用此question和answer来为该项目形成我的图标圈。
但我想使其响应速度更快，因为我需要在其中包装一些jQuery toggle()。

<div class="jumbotron">
    <div class="circle-container">
        <div class="row">

            <span data-scrollreveal="enter top, wait 1.0s">
              <a href="#" class="center hvr-grow"><img src="img/specialoffers.jpg" class="img-circle" alt="">
              </a>
            </span>

            <span data-scrollreveal="enter right, wait 1.2s">
              <a href="#" class="deg0"><img src="img/circle/special.png" class="img-circle" alt=""></a>
            </span>

            <span data-scrollreveal="enter right, wait 1.4s">
              <a href="#" class="deg45"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
            </span>

            <span data-scrollreveal="enter right, wait 1.6s">
              <a href="#" class="deg135"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
            </span>

            <span data-scrollreveal="enter left, wait 1.8s">
              <a href="#" class="deg180"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
            </span>

            <span data-scrollreveal="enter left, wait 2.0s">
              <a href="#" class="deg225"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
 /* Position icons into sircle */
.circle-container {
    position: relative;
    width: 35em;
    height: 35em;
    padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
    border: none;
    border-radius: 50%;
    margin: 1.75em auto 0;
}

.circle-container a {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%; left: 50%;
    width: 6em; height: 6em;
    margin: -2em; /* 2em = 4em/2 */ /* half the width */
}

.circle-container img {
    display: block; width: 100%;
}

.deg0 { transform: translate(18em); } /* 12em= half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(18em) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(18em) rotate(-135deg); }
.deg180 { transform: translate(-18em); }
.deg225 { transform: rotate(225deg) translate(18em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(18em) rotate(-315deg); }

.circle-container a.deg45:hover, a.deg45:activate { img-size: 150%; }
                  </span>

                  <span data-scrollreveal="enter left, wait 2.2s">
                    <a href="#" class="deg315"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
                  </span>


              </div>
          </div><!--end circle-container-->
      </div>

此div的CSS:

/* Position icons into sircle */
.circle-container {
    position: relative;
    width: 35em;
    height: 35em;
    padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
    border: none;
    border-radius: 50%;
    margin: 1.75em auto 0;
}

.circle-container a {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%; left: 50%;
    width: 6em; height: 6em;
    margin: -2em; /* 2em = 4em/2 */ /* half the width */
}

.circle-container img {
    display: block; width: 100%;
}

.deg0 { transform: translate(18em); } /* 12em= half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(18em) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(18em) rotate(-135deg); }
.deg180 { transform: translate(-18em); }
.deg225 { transform: rotate(225deg) translate(18em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(18em) rotate(-315deg); }

.circle-container a.deg45:hover, a.deg45:activate { img-size: 150%; }

我想将地雷图像包裹在div内并将其定位以形成圆圈，以便它们变得灵敏。

那可能吗？

请帮忙。
保护你。

我正在为此项目使用bootstrap和html5boilerplate。

我需要将其设置为responsive.，在较小的视口(viewport)中看起来像这样

最佳答案

您能否检查我为您创建的JsFiddle https://jsfiddle.net/1et5s06h/，以检查尝试调整预览 Pane 大小的尝试。

仅供引用，我的答案取决于bootstrap的Grid system和Responsive utilities。您可能需要阅读它们，以更好地了解网格系统和响应实用程序类，并自定义我的答案以更好地满足您的需求。

请引用以下代码(使用您的CSS):

 <div class="jumbotron">
            <div class="circle-container hidden-xs hidden-sm">
                <div class="row">
                    <span data-scrollreveal="enter top, wait 1.0s">
                        <a href="#" class="center hvr-grow">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" alt="">
                        </a>
                    </span>

                    <span data-scrollreveal="enter right, wait 1.2s">
                        <a href="#" class="deg0">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                    <span data-scrollreveal="enter right, wait 1.4s">
                        <a href="#" class="deg45">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                    <span data-scrollreveal="enter right, wait 1.6s">
                        <a href="#" class="deg135">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                    <span data-scrollreveal="enter left, wait 1.8s">
                        <a href="#" class="deg180">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                    <span data-scrollreveal="enter left, wait 2.0s">
                        <a href="#" class="deg225">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                    <span data-scrollreveal="enter left, wait 2.2s">
                        <a href="#" class="deg315">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                </div>
            </div>
            <!--end circle-container-->
            <div class='container hidden-lg hidden-md '>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-sm-4 col-xs-4">Strange book here :)</div>
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1992-17-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                </div>
            </div>
        </div>

更新:我做了一点增强here，它仅在超小型设备(xs)中显示网格界面，并通过添加以下css将图像居中放置在其容器中:

div.container.hidden-lg.hidden-md.hidden-sm div.row div.col-sm-4.col-xs-4 a img.img-circle
    {
         display:block;margin:10px auto;
    }

并且我认为最好将答案背后的想法更生动地表达出来:我基本上创建了您的内容的两个实例，并使用responsive utility classes使您的图像圈子可见:

大型设备(大型台式机，1200px及以上)(lg)

中型设备(台式机，992px及以上)(md)

小型设备(平板电脑，768像素及以上)(sm)

并在以下位置隐藏圆放置并显示网格放置:

额外的小型设备(电话，小于768px)(xs)

当然，再次强调一下，我的更新说明解释了here呈现的更改后的代码。