javascript - 响应圈图像？

Question

我正在尝试制作响应式网页。我用过这个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)上看起来像这样

Answer 1

你能检查一下我为你创建的 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我让你的图像圈可见:

• 大型设备(大型桌面，1200 像素及以上)(lg)
• 中型设备(台式机、992 像素及以上)(md)
• 小型设备(平板电脑，768 像素及以上)(sm)

并隐藏圆圈放置并使网格放置可见:

• 超小型设备(手机，小于 768 像素)(xs)

当然，再次强调，我的更新说明解释了所提供的更改代码 here .