html5 | Master-web

Как определить реальные масштабы изображения в JavaScript

Отзывчивый дизайн прекрасная вещь. Сайты с легкостью адаптируются под устройство, в том числе и загружаемые пользователем изображения. Сегодня, когда уже может свободно использоваться в разработке все-таки случаются ситуации, когда мы просто масштабируем загруженное изображение.

Как правило в таких ситуациях мы загружаем изображение не указывая размеров:

<img id="myimage" src="myimage.jpg" alt="my image" />

Картинка загрузиться с исходными размерами и нам надо всего-лишь добавить немного CSS чтобы она вела себя отзывчиво:

#myimage {
  max-width: 100%;
}

Но часто бывает так, что нам приходится манипулировать размерами изображения с помощью JavaScript. В таких ситуациях нам нужно определить реальные ширину и высоту для изображения. Но свойства width и height будут возвращать измененные в зависимости от viewport размеры:

Продолжить чтение

Viva bootstrat!

Почему так, почему «Viva bootstrat!»? Все очень просто — теперь блог использует тему основанную на уже известном Bootstrap. Я очень долго присматривался к этому фреймворку от Twitter, а потом, когда сделал на нем верстку для Adminjobs.ru, решил что это очень качественный, гибкий и масштабируемый инструмент для верстки современных макетов на HTML5 и CSS3.

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

Поэтому, милости прошу всех в обновленный внешне Master-web.

Кстати, как вам такой вариант блога?

[poll id=»3″]