Способы создать картинку ссылкой HTML
 | |
| Давайте рассмотрим 2 простых способа, как сделать картинку ссылкой в html, где подключаем CSS, что фиксируем изображение по заданному размеру. На этой странице показано, как создавать гиперссылки на изображения. Это делается путем замены текста привязки гиперссылки href на некоторый HTML-img код изображения, где при клике по снимку производится переход по ссылке. По сути веб разработке можно изначально разделить ссылки на два прописанных метода, это как графический и текстовой вариант. Но как поняли, что в этом мануале подробно разберем графический способ, где выставляем картинку, что по клику по ней идет переход на заданную страницу по ссылки, что была указан в коде. В этом примере используется img и a элементы для создания связанного изображения. Также атрибуты, которые могут быть добавлены к элементу HTML, чтобы предоставить больше информации. Как создать картинку ссылкой в htmlЕсли кто не знает, то само изображение на сайте или блоге отображается при помощи тега img, и для того, чтоб что поставить изображение, то здесь нам нужно добавить этот код. Первый вариант: Обратите внимание, что alt является обязательный атрибут. Код <a href="http://zornet.ru/load/142"><img src="http://zornet.ru/_fr/15/8603210.jpg" alt="Ключевые слова связаны с картинкой"></a> Это простой вариант, где изображение будет по умолчанию, как по высоте, так по ширине. Второй вариант: Во втором способе мы подключаем CSS, где уже самостоятельно задаем размеры, а также красиво оформляем.  HTML Код <div class="kartinka-sylkoy"> <a href="#" class="transition-image"></a> </div> CSS Код .kartinka-sylkoy { width: 285px; height: 195px; background-image: url("http://zornet.ru/_fr/63/3051697.jpg"); background-size: 285px 195px; background-position: top left; position: relative; } .transition-image { position: absolute; top: 0; bottom: 0; width: 100%; } Этот метод имитировал типичное поведение ссылки, где находится изображение. Демонстрация Использование width и height Вы можете использовать атрибуты width и для height указания размеров изображения. HTML Код <a href="/"><img src="http://zornet.ru/zornet_ru5/1310741239_star.jpg" width="235px" height="215x" alt="Пишем ключевое слово"></a> В этом примере мы будем масштабировать изображение, чтобы оно было меньше. Адаптивный дизайн Если ваш сайт должен отображаться на экранах нескольких размеров на мобильных устройствах, как планшетах или ноутбук и другие гаджет. То здесь возможно вы обнаружите, что ваши изображения слишком велики для некоторых устройств. Это будет особенно верно, если вы используете width и height атрибуты, для того чтобы установить большие размеры изображения. Существует один не хитрый способ, который заключается в использовании max-width свойства на стиле CSS, что идет для установки максимальной ширины изображения в 100%. HTML Код <a href="/"><img src="http://zornet.ru/_fr/21/1354606.jpg" style="max-width:100%;" alt="Создайте изображение перехода"></a> Указывая максимальную ширину, вы не устанавливаете явную ширину, где сообщаем браузеру, чтобы он не превышал указанную вами ширину в 100%. В этом случае браузер все равно должен уменьшить размер изображения, если 100% слишком велико для экранов. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 7 | |
|
| |
