16.07.2014

Выравнивание фото по ширине

Я очень люблю красиво оформленные блоги и журналы. Если вижу блог, в котором оформление выверено по стилю, композиции, цвету, я полностью в него погружаюсь, смотрю вдоль и поперек. Для меня очень важно, чтобы все было гармонично и красиво.

Одним из важных моментов в оформлении считаю фотографии, а конкретнее, их размер. Мне нравится, когда фото можно рассматривать, не кликая на него дополнительно. Также важным моментом считаю выравнивание фоток по ширине. Когда они одного размера, это смотрится красиво и аккуратно.




К моему большому удивлению, таким образом оформленные статьи встречаю не часто. И мне пришла мысль, что может люди просто не в курсе, что так можно делать? На самом деле это очень просто, и я хочу вам показать, как это делается.

Добавляем в блог фотографии разной ширины. Для примера я добавлю две. Выбираем в настройках размер отображения. При этом пропорции фото сохраняются.


Открываем html-код. Не пугаемся и находим код фотографий.


В коде видим такие цифры – это высота и ширина фотографии, соответственно.


Мы можем их задать любыми по своему усмотрению. И тогда размер фото изменится. Но, чтобы сохранить пропорции, нужно сделать простой расчет. Так как мы подгоняем фотки по ширине, то этот размер задаем сами, а высоту вычисляем: 
Тек. выс. х Жел. шир. / Тек. шир. = х.

Текущая высота       Текущая ширина
          х                      Желаемая ширина

Я хочу сделать фото по ширине 600. Вот какие числа получились. 


Теперь возвращаемся к обычному отображению записи и видим, как изменились наши фотки.


Такой простой способ, но какое преображение! 
Таким образом можно не только подгонять фотки друг под друга, но и вообще менять размер, если у вас, например, фотка вылезла за ширину основной ленты.
Надеюсь, вам был полезен мой мастер-класс.

    8 комментариев:

    1. о, круто) а я в настройках искала и ,конечно, не нашла))

      ОтветитьУдалить
    2. Оль, формулы ещё со школы не люблю, но решила попробовать и свои картинки сделать на всю возможную ширину, получилась, тренировалась на фото к этому посту - http://free-dom-777.blogspot.com/2014/07/50-nedel-k-mechte-26-27-nedelya.html Не знала ранее, как сделать на всю ширину, надо беречь свое зрени и зрение читателей блога!

      ОтветитьУдалить
      Ответы
      1. Отлично получилось! Не обязательно на всю ширину фотки делать. Можно любые размеры задавать.

        Удалить
      2. Оля, а что на всю ширину не стоит?

        Удалить
      3. Юля, это уже как тебе нравится. Лично мне нравится делать фото большими.

        Удалить
    3. Оля, спасибо большое!
      А я даже не знала, что можно так выровнять фотографии)))

      ОтветитьУдалить
    4. Спасибо большое! Теперь блог стал красивее и аккуратнее, глаз радуется!

      ОтветитьУдалить