在Bootstrap中用背景色填充图像

Question

Couldn't find an answer to this so..

It's probably a very simple solution but I've been tunnel visioning for the past 20 minutes and it's frustrating me.

The padding of an image, which I'm trying to give a circle background element, is really annoying.

Margin doesn't work either.

My image is 120 px large, and the padding of 2em just makes it smaller, but I want it to stay the same size, but have a bigger background size.

Here's the code:

    <div class="row">
    </div class="container-fluid">
        <div class="col-md-4 img-icon-pad">
            <img src="img/icons/html.png" class="img-responsive img-icons" />
        </div>

        <div class="col-md-4">
            <img src="img/icons/html.png" class="img-responsive img-icons" />
        </div>

        <div class="col-md-4">
            <img src="img/icons/html.png" class="img-responsive img-icons" />
        </div>

    </div>

    /* Boxes */

.img-icons {
    height: 120px;
    width: auto;
    background-color: #f8f8ec;
    border: 2px solid #e97117;
    padding: 2em;
border-radius: 50%;

}

.img-icon-pad {
}

And a screenshot of what I mean:

• No padding https://i.gyazo.com/745896ad418274f70e8189f6b84c7b6d.png

• Padding: https://i.gyazo.com/b2a264d8a361a426cc43992d90352e79.png

Answer 1

Did you increase the height of .img-icons class from 120 to 150px or bigger if you want. If that doesn't work then you have probably restricted size of the div containing the img.

Answer 2

i think this is what are you trying to do :

<div class="row">



        <div class="col-md-4">
        <div class="img-responsive img-icons" >
          <div class="img">

          </div>
        </div>
        </div>



    </div>

css:

.img-icons {
    height: 120px;
    width:120px;
    background-color: #f8f8ec;
    border: 2px solid #e97117;
   border-radius: 50%;
 padding: 2em;
}
.img{
  text-align:center;
   height:120px;
   width:120px;
     background-color: #f8f8ec;
    border: 2px solid #e97117;
}

you can see the result here https://jsfiddle.net/nt0zqc1t/3/

Answer 3

I was going to say that in .img-icons class you have width set to auto. This may be causing resizing. If you set it to a fixed width it may not resize.

Answer 4

I think it is ok

 <div class="row">
    <div class="container-fluid">
        <div class="col-md-4 ">
            <div class="thumbnail">
               <img src="img/icons/html.png" class="img-responsive img-icons" />
            </div>
        </div>

        <div class="col-md-4">
            <img src="img/icons/html.png" class="img-responsive img-icons" />
        </div>

        <div class="col-md-4">
            <img src="img/icons/html.png" class="img-responsive img-icons" />
        </div>

    </div>

    <style>
.thumbnail {
    height: 150px;
    width: 150px;
    border: 2px solid #e97117;
    background-color: #f8f8ec;
     padding: 2em;
}

</style>