用背景颜色填充 Bootstrap 中的图像

Question

找不到答案所以..

这可能是一个非常简单的解决方案，但过去 20 分钟我一直在幻想，这让我很沮丧。

图像的填充，我试图给一个圆形背景元素，真的很烦人。

保证金也不起作用。

我的图片大 120 像素，2em 的内边距只会让它变小，但我希望它保持相同的尺寸，但背景尺寸更大。

代码如下：

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

以及我的意思的截图：

无填充 https://i.gyazo.com/745896ad418274f70e8189f6b84c7b6d.png
填充： https://i.gyazo.com/b2a264d8a361a426cc43992d90352e79.png

Answer 1

您是否将 .img-icons class 的高度从 120 像素增加到 150 像素或更大（如果需要）。如果这不起作用，那么您可能限制了包含 img.

的 div 的大小

Answer 2

我想这就是你想做的事情:

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

你可以在这里看到结果https://jsfiddle.net/nt0zqc1t/3/

Answer 3

我想说的是，在 .img-icons class 中，您将宽度设置为自动。这可能会导致调整大小。如果您将其设置为固定宽度，则它可能不会调整大小。

Answer 4

我觉得还行

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

用背景颜色填充 Bootstrap 中的图像

Padding an image in Bootstrap with background colour

html

css

padding

twitter-bootstrap