Responsive circle image bootstrap

Question

Two problems. Black border seems to be egg shaped a little (highly visible if you will change duration of animation from 60s to 1s). Images even with bootstrap's class="img-responsive center-block" are not changing their width/height. How can i fix that?

JSFiddle mirror: https://jsfiddle.net/9g7oswgk/3/

EDIT #1: Found solution for almost-perfect circle border in my snippet but had to remove text inside of it. All i had to do was to change padding-bottom value from 100% to 99%. As of responsive section, @Ganpat gave ideal solution to it for adding additional wrap class. With 1s animation might look imperfect, but with 60s it's imperfection is nearly invisible.

EDIT #2: Found solution for responsive images inside this border. Just had to replace hardcoded width: 150px; height: 150px; with width: 40%; to their class named img-orbit. Apparently 50% makes them too big, but 40% is K.

EDIT #3: Seems like images are centered on -20% value.

.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>

this might help :http://stackoverflow.com/questions/14293719/responsive-css-circles-that-can-hold-centered-content — Raviteja, Nov 04 '15 at 04:27

score 1 · Accepted Answer · answered Nov 05 '15 at 07:27

To make this as responsive you have to create a another div around "orbit" class div and give that div's width in percentage.

<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>

and then try to add width to this "some-class" div.

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

Second problem: if you watch that div with inspect elements then you will get that the divs width is getting chaged: once try to give here fixed with and height it is working correctly when you reduce transition duration form 60s to 1s.

or else if you want to resize you heading text then you can resolve it or if you can remove that text then it can also solve that

Responsive circle image bootstrap

1 Answers1