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类的高度从120增加到150px或更高。如果这不起作用，那么你可能限制了包含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类中说你将宽度设置为auto。这可能会导致调整大小。如果将其设置为固定宽度，则可能无法调整大小。

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>

使用背景颜色在

4 个答案: