响应圆图像引导

Question

两个问题。黑色的border看起来有点像鸡蛋形状(如果您将animation的持续时间从60s更改为1s，则高度可见)。即使使用引导程序的class="img-responsive center-block"，图像也不会改变其宽度/高度。我怎么才能解决呢？

JSFiddle镜像：https://jsfiddle.net/9g7oswgk/3/

编辑1:在我的代码片段中找到了几乎完美的圆圈边框的解决方案，但必须删除其中的文本。我所要做的就是将padding-bottom值从100%更改为99%。作为响应部分，@Ganpat给出了添加额外包装类的理想解决方案。使用1s动画可能看上去不完美，但60多岁的时候，它的缺陷几乎是看不见的。

编辑#2:在这个边框内找到响应图像的解决方案。只需将硬编码的width: 150px; height: 150px;替换为width: 40%;，就可以将其命名为img-orbit。显然，50%使它们太大，但40%是K。

编辑#3:看起来图像是以-20%值为中心的。

​

.orbit{
  text-align: center;
  color: black;
  padding-bottom: 99%;
  position: relative;
  border: 3px solid black;
  border-radius: 50%;
    
  -webkit-animation: spin-right 60s linear infinite;
     -moz-animation: spin-right 60s linear infinite;
      -ms-animation: spin-right 60s linear infinite;
       -o-animation: spin-right 60s linear infinite;
          animation: spin-right 60s linear infinite; /* change here from 60s to 1s*/
    
}

/* small circles */
.img-orbit{
    width: 40%;
    position: absolute;
    border: 2px solid black;
    border-radius: 50%;
    box-shadow: 0 0 34px blue;
    -webkit-animation: spin-left 60s linear infinite;
     -moz-animation: spin-left 60s linear infinite;
      -ms-animation: spin-left 60s linear infinite;
       -o-animation: spin-left 60s linear infinite;
          animation: spin-left 60s linear infinite;
}

.img-orbit2{
    top: 30%;
    left: -20%;
}
.img-orbit4{
    top: 30%;
    right: -20%;
}

.some-class{
    width: 50%;
    margin: auto;
}

@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes spin-left {
  100% {
    -webkit-transform: rotate(-360deg);
       -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
         -o-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@keyframes spin-left {
  100% {
    -webkit-transform: rotate(-360deg);
       -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
         -o-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="some-class">
    <div class='orbit'>
        <img class="img-orbit img-orbit2" src="http://lorempixel.com/200/200/" class=" img-responsive center-block">
        <img class="img-orbit img-orbit4" src="http://lorempixel.com/200/200/" class=" img-responsive center-block">
     </div>
    </div>
 </div>

​

Answer 1

为了使它具有响应性，您必须在“轨道”类div周围创建另一个div，并给出div的宽度(百分比)。

<div class="container">
<div class="some-class">
  <div class="orbit">
        <h2><span class="jumbotron-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</span></h2>
        <img class="img-orbit img-orbit2" src="http://lorempixel.com/200/200/">
        <img class="img-orbit img-orbit4" src="http://lorempixel.com/200/200/">
     </div>
  </div>
 </div>

然后尝试在这个“某些类”div中添加宽度。

.some-class{
    width: 50%;
    margin: auto;
}

第二个问题:如果你用检查元素观察这个div，那么你就会发现div的宽度变粗了:一旦尝试给出这里的固定和高度，当你将过渡时间从60缩短到1s时，它是正确工作的。

或者，如果您想调整标题文本的大小，那么您可以解析它，或者如果您可以删除该文本，那么它也可以解决这个问题。