Промяна на размера на изображението в сравнение с до блока, проектирането и разработването на сайта

Добър ден. 🙂

В този урок ще ви покажа как се прави това с адаптивно оформление, когато ширината на блока се променя, изображението, което е в нея, да промените размера си спрямо блока. Имах урок - как да се простират на фона на цялата ширина на блока. подобна на тази, но има разнообразна фон блок. Веднага метод за изображение вмъква с етикет IMG.

Пример за адаптивно за оразмеряване на изображения в сравнение с родителското устройство, можете да видите в примера. За да видите промяната на изображението, просто да промените размера на прозореца на браузъра.

Този ефект се постига с прост CSS. Ако просто се свържете снимката, тя може да излиза извън рамките на блока и това не е точно това, което ви трябва, особено ако устройството се променя неговия размер, което означава, че сайтът използва адаптивно оформление.

Блок в рамките на който е поставена снимка, може да има фиксирана ширина в пиксели или промяна по отношение на размера на прозореца на браузъра. Картината може да има различни размери, но за да изглежда добре, то е необходимо да се добавят стилове. Преди това, можете да го зададете на един клас, или да зададете стилове веднъж за всички изображения наведнъж.

Например, устройството ще има ширина от 75% по отношение на екрана, изображението ще отнеме до цялата ширина и промяна на размера му с уреда.

Ние ще блокира стилове:

Снимка зададете максимална ширина на сто, а за автоматично определяне на височината. Ръст непременно различни, с намаляване на ширината на блока, картината ще се промени ширината му, но не и от височината и е с неправилна форма. Готов стилове ще бъдат приблизително.

Както можете да видите, че всичко е много просто. Ако зададете всички параметри правилно, резултатът също ще бъде необходимо. По едно време, да страдам за да се постигне този ефект.

Това е всичко, благодаря ви за вниманието. 🙂

Ако сте били от полза за работата си, можете да подкрепят сайта :)

Здравейте скъпи приятели

Имате AdBlock инсталирано разширение или други подобни. Добавете сайта си в белия списък, и по този начин да допринесе за vnesesh неговото развитие. Инструкции за това как да деактивирате AdBlock искат този прозорец