Responsive images - Extra padding?
-
28-10-2019 - |
문제
I'm programming a website using Foundation theme for wordpress that is setup for responsive designs and I have a problem with images.
I get an extra bottom padding that I simply cannot see on firebug. This is a mockuo of what I have, and the problem shows up on jsFiddle so I'm guessing it has nothing to do with the template.
<div class="container">
<img src="http://www.lamasia.es/web/new/wp-content/uploads/imagen3.png" alt=""/>
</div>
img{
height:auto;
max-width:100%
}
.container{
background-color:#ccc;
padding:2%;
width:40%;
}
I read some answers on this and some said use padding as a percentage, which I did and didn't solve the issue. Why is this happening and how can I fix it?
해결책
The issue is related to the default vertical-alignment of this inline placed element. You can understand the behaviour looking at this MDN documentation page:
so or you change the display property of the element, or you better change the vertical-align
property (IMHO it's better because you don't change the display)
다른 팁
Setting display:block style on the image sorts it for me :)
display:block
should be your fix.. http://jsfiddle.net/dbCsY/1/