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個相同大小的圖像具有相同的造型 - 一個看起來略有不同大小

回答

相關問題