3 동일한 크기의 이미지 - 하나의 모양이 약간 다른 크기

Question

나는이 페이지가 : http://www.problemio.com있는 POST가// 될 의논 SOLVE에 대한 3 개 이미지가있다 그들에 대한 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> 

그러나 세 번째 이미지는 다소 뻗어 있습니다. 왜 그런 일이 일어날 지 알기나 해? 스타일은 이미지와 동일합니다.

감사합니다. createbutton.png에 대한

Answer 1

모든 3를 한 streatching 60x60px하는 IMG의 폭을 설정했습니다.

40x36 37x40 39x41

당신은 특별히 CSS 규모 그들에게 시도하고있는 브라우저가 크기를 조정에 최선의 노력을주고있다. 그것은 주어진 것만으로도 그렇게 할 수 있습니다.

다른 문제 : 당신은 대부분의 시간, 퍼지, 나쁜 찾고 이미지가 발생합니다 크기에서 그 규모를 확대하는

• .
• 문제의 이미지가 가운데 정렬되어 있지 않습니다.

제 제안은 모든 원본 이미지를 동일한 비율로 설정하고 더 크게 만들려고하면 더 높은 해상도로 만드는 것입니다.

Answer 2

이미지 dimentions는 40px × 36px이고, 당신이 그렇게 자신이 서로 다른 비율을 원래 이미지의

Answer 3

세 번째 이미지의 크기가 다른 두 이미지와 다르므로 이와 같습니다.