用Bootstrap填充图像与背景颜色(Padding an image in Bootstrap with background colour)

用Bootstrap填充图像与背景颜色(Padding an image in Bootstrap with background colour)

无法找到答案，所以..

这可能是一个非常简单的解决方案，但在过去的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

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

最满意答案

我觉得还可以

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

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>