Question

我有这个页面：http://www.problemio.com上面有3个用于POST / DISCUSS / SOLVE的图像，它们的html如下所示：

         <div style="float: left; width: 70px; padding-left: 10px; padding-top: 10px;">
<img width="60px" height="60px"  src="http://www.problemio.com/img/ui/postbutton.png" style="border: none;" alt="Problemio" />
         </div>
         <div style="float: left; padding-left: 5px; padding-top: 5px;">
            <h2>POST</h2>
            <span style="color: gray;">problems</span>
         </div>

         <div style="float: left; width: 70px; padding-left: 50px; padding-top: 10px;">
<img width="60px" height="60px"  src="http://www.problemio.com/img/ui/discussbutton.png" style="border: none;" alt="Problemio" />
         </div>
         <div style="float: left; padding-left: 5px; padding-top: 5px;">
            <h2>DISCUSS</h2>
            <span style="color: gray;">brainstorm ideas<br /> with others</span>
         </div>         


         <div style="float: left; width: 70px; padding-left: 50px; padding-top: 10px;">
<img width="60px" height="60px"  src="http://www.problemio.com/img/ui/createbutton.png" style="border: none;" alt="Problemio" />
         </div>
         <div style="float: left; padding-left: 5px; padding-top: 5px;">
            <h2>SOLVE</h2>
            <span style="color: gray;">create new<br />
            solutions</span>
         </div>              

         <div style="clear:both;"></div>

但是第三张图片看起来很紧张。知道为什么会这样吗？图案的样式相同。

谢谢！

Answer 1

所有3张原始图像都有不同的比例。

40x36 37x40 39x41

然后，您尝试使用CSS专门调整它们的大小，浏览器正在尽最大努力调整它们的大小。只能用它给出的东西才能做到这么多。

其他问题：

你正在缩小它们的大小，这在大多数情况下会导致模糊，看起来很糟糕的图像。
相关图像在中心没有彼此对齐。

我的建议是将所有这些源图像设置为相同的比例，如果您打算将它们放大，可以使它们的分辨率更高。

Answer 2

create button.png的图片尺寸为40px × 36px，并且您已将img的宽度设置为60x60px，因此它会拉伸它

Answer 3

就像那样，因为第三幅图像的尺寸与其他两幅图像的尺寸不同。

3个相同尺寸的图像具有相同的样式 - 一个看起来略有不同的大小

3 个答案: