3 изображения одинакового размера с одинаковым стилем

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

Это так, потому что размеры третьего изображения отличаются от двух других.

Answer 3

размеры вашего изображения для createbutton.png равны 40px × 36px, и вы установили ширину img равной 60x60px, чтобы он растягивался