从图像中删除空白区域 [英] Remove white space from image

问题描述

请看一下这个小提琴：

。图像周围的剩余空白区域由HTML中的填充控制。

总的来说，你的HTML / CSS在这里混合浮动和定位以及在跨度。很奇怪。

please take a look at this fiddle :

http://jsfiddle.net/cX47v/1

I am simply trying to preserve the effect that you see, but i want to remove the white space below the image. I know about display:block, but if i do it, the hover effect does not work. Any ideas on how to fix that ?

解决方案

Changing the HTML to what I have below (adding the style="font-size:0") fixes the issue in Chrome, Firefox, IE9 and Safari. I've seen this issue before where a browser assumes one row of text as some extra height, even where there is no visible text.

<div class='fancy_image'>
    <div class='shadow' style='border:2px solid; float:left;padding:5px;margin:10px;'>
        <div style="font-size: 0;">    
            <img class='fade' src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width=300 height=200  />
        </div>
    </div>
</div>

You can see it work here: http://jsfiddle.net/jfriend00/8FkmG/. The remaining white space around the image is controlled by the padding in your HTML.

Overall, your HTML/CSS is really screwy here mixing float and positioning and doing positioning on a span. Very odd.

这篇关于从图像中删除空白区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！