1

How do I get my #img-alfa image responsive? I already tried background-size:100% auto; and if I delete the width and height of the background-image it totally disappears.

.img-responsive {
 width: 100%;
 vertical-align: middle;
}

#img-alfa {
top: -60px;
left: 68px;
height: 200px;
width: 150px;
position: absolute;
background: url("../img/alfazwartwitsmall2.png") no-repeat;
 }
 
#img-alfa:hover {
top: -60px;
left: 68px;
height: 200px;
width: 150px;
position: absolute;
background: url("../img/alfakleursmall2.png") no-repeat;
 }
<div class="col-xs-6 col-sm-3 placeholder">
 <img class="img-responsive"
    src="img/background_white.jpg">
 <span class="circle_inner">  
<a href="#"><div style="border-radius: 0em;" class="img-responsive" id="img-alfa" ></div></a>
    </span>
 </div>

Thanks!

Topr
  • 872
  • 3
  • 21
  • 34
mishad050
  • 448
  • 5
  • 15

1 Answers1

1

You could use background-size: cover;, with a trick to keep your image ratio:

.img-responsive {
  width: 100%;
  vertical-align: middle;
}

#img-alfa {
  padding-bottom: 75%; /* See comments under snippet */
  background-image: url("https://placekitten.com/g/200/150");
  background-size: cover;
}
<img class="img-responsive" src="https://placekitten.com/200/150">
<div class="img-responsive" id="img-alfa"></div>

The trick is to use a percent value for padding-bottom. The value will be calculated, based on the width value (= 100%). Here how to define the 75% value:

padding-bottom = 100 * height / width = 100 * 150 / 250 = 75

zessx
  • 68,042
  • 28
  • 135
  • 158