[英]Remove white space in images
我有很多图片,我的代码如下。
在某些图像的顶部或左侧的某些图像中存在空白。 我找不到如何修复它。 我已经设置了宽度和最大宽度。
我将图像保存为 tmb 文件。 有可能是因为它吗?
我应该修复什么? 谢谢!
.pbombd-thumbnail { float:left; margin-top: 10px; margin-right: 17px; width: 220px; padding: 0px !important; border-radius: 4px; border: 0px; } .pbombd-img-thumb { max-width:218.4px; max-height: 178px; min-width: 218.4px; min-height: 178px; margin:0px; border-top-left-radius: 4px; border-top-right-radius: 4px; }
<div class="thumbnail pbombd-thumbnail"> <a href="#"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350" class="pbombd-img-thumb"/> </a> </div>
编辑:我忘了添加这个有问题的css:
.thumbnail { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857; background-color: #FFF; border: 1px solid #DDD; border-radius: 4px; transition: all 0.2s ease-in-out 0s; }
添加display: block;
到.pbombd-img-thumb
。 显示为inline
或inline-block
可能会导致额外的空间。
.pbombd-thumbnail { float:left; margin-top: 10px; margin-right: 17px; width: 220px; padding: 0px !important; border-radius: 4px; border: 0px; background-color: orange; } .pbombd-img-thumb { display: block; max-width:218.4px; max-height: 178px; min-width: 218.4px; min-height: 178px; margin:0px; border-top-left-radius: 4px; border-top-right-radius: 4px; }
<div class="thumbnail pbombd-thumbnail"> <a href="#"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350" class="pbombd-img-thumb"/> </a> </div>
尝试添加vertical-align: middle;
到 img 元素的 css。 一些媒体元素有空白。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.