Как да увеличите изображения на уебсайт
Изображенията в сайтовете са доста често срещани и са големи, но дизайнът на сайта не винаги ви позволява да го поставите в пълен формат. Следователно трябва да измислите начин, който да ви позволи да ги увеличите.
Нека започнем с примитивни методи и завършим с най-добрия начин за уголемяване на изображение.
1. Увеличете изображението чрез връзка
Най-лесният начин без прилагане на CSS. Просто поставете линк към изображение с по-голям размер.
Пример за работа:
Въпреки лекотата на използване, този метод далеч не е най-добрият, тъй като трябва да отворите нова страница, за да увеличите изображението, но този метод може да преглежда изображения с всякакъв размер. Така че заключаваме: ако трябва да увеличите изображения с много голям размер, тогава това е единственият сигурен начин да го направите.
2. Автоматично мащабиране при задържане
Името на метода ясно отразява неговата същност: когато преместите курсора на мишката върху изображението, то автоматично се увеличава. Изпълнението на метода е елементарно, но отново този метод е неудобен, защото е невъзможно нормалното движение на курсора през изображението. В края на краищата, той винаги ще се увеличава - това може да започне да дразни потребителя.
Следният код прилага възможността за автоматично мащабиране при задържане на мишката:
стил>
курсор: показалец;
максимална ширина: 150px;
максимална ширина: няма;
Пример
Обяснения към примера: → img.zoom - задава ширината на изображението преди мащабиране; → img.zoom:hover - задава ширината на изображението следмащабиране (параметър none означава, че няма ограничение за максималния размер).
3. Увеличете изображението при щракване
Това е най-разпространеният и удобен метод за уголемяване на изображения. Освен това има много начини и варианти за изпълнение. Помислете за някои от най-популярните опции:
3.1. Увеличаване с активен фокус След като щракнете върху изображението, то се увеличава, но поради това текстът се премества надолу, така че този метод далеч не е най-добрият. Ето примерен код:
Как изглежда на страницата:
3.2. Уголемяване на изображение върху страницата
По-долу е кодът за прилагане на този метод