删除图像中的空白区域

时间:2015-10-06 20:56:51

标签: html css image

我有很多图片,我的代码如下。

某些图像的顶部或左侧的某些图像中有空白区域。我找不到如何解决它。我设置了宽度和最大宽度。

我将图像保存为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>

编辑: 我忘了添加这个问题:

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

2 个答案:

答案 0 :(得分:1)

display: block;添加到.pbombd-img-thumb。显示为inlineinline-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>

答案 1 :(得分:0)

尝试将vertical-align: middle;添加到img元素的css中。有些媒体元素有空格。