无法找到答案,所以..
这可能是一个非常简单的解决方案,但在过去的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>更多推荐
padding,填充,em,class,电脑培训,计算机培训,IT培训"/> <meta name="descripti
发布评论