3个相同大小的图像具有相同的造型 - 一个看起来略有不同大小

我有这个页面：http://www.problemio.com其上有3对图像进行POST /讨论/解，并为他们的HTML看起来像这样：3个相同大小的图像具有相同的造型 - 一个看起来略有不同大小

  <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>

但第三张图像看起来有些拉长。任何想法为什么会发生？造型对于图像是相同的。

谢谢！

来源

2011-11-18 GeekedOut

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

40x36 37x40 39x41

您然后试图尺寸他们专门与你的CSS，浏览器是给其最大努力在调整他们。它只能做很多事情。

其他问题：

您正在扩大起来的规模，这将大部分的时间，导致模糊的，难看的图像。
有问题的图像没有在中心彼此对齐。

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

来源

2011-11-18 16:26:04

另请注意：在不同标签中打开3张图像并在它们之间切换。你会看到每个图像中圆的中心是不同的。 – schnaader

@schnaader没有注意到。记住如果我编辑它？ –

没问题，我所有的评论都是根据WTFPL授权的;） – schnaader

为createbutton.png图像dimentions是40px × 36px并已设置了IMG的宽度60x60px所以其streatching它

来源

2011-11-18 16:26:00 david

就是这样，因为第三张图片的尺寸与其他两张不同。

来源

2011-11-18 16:28:09 Vinit

3个相同大小的图像具有相同的造型 - 一个看起来略有不同大小

回答

相关问题