我有很多图片,我的代码如下。
某些图像的顶部或左侧的某些图像中有空白区域。我找不到如何解决它。我设置了宽度和最大宽度。
我将图像保存为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;
}
答案 0 :(得分:1)
将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>
答案 1 :(得分:0)
尝试将vertical-align: middle;
添加到img元素的css中。有些媒体元素有空格。