Responsive circle image bootstrap

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> 

然後嘗試將寬度添加到此「some-class」div。

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

問題二：如果你看的是DIV與檢查元素，那麼你將得到的div寬度越來越chaged： 一次嘗試在這裏給固定和高度是否正常工作，當你減少過渡期形式60s到1s。

，或者如果你想調整你的標題文本，然後就可以解決，或者您可以刪除文本，然後它也可以解決