Как разместить слитно два изображения друг под другом?

🕛 19.01.2009, 18:54
Расположение изображений друг под другом часто продиктовано требованиями дизайна, когда необходимо «склеить» без швов несколько изображений в одну цельную картину. Обычно для переноса текста, а также изображений на другую строку применяется тег <BR> или контейнер фиксированного размера, но в том и другом случае существуют свои особенности.
Для начала рассмотрим способ применения тега <BR>, который отвечает за создание переноса. Этот тег достаточно добавить сразу же после первого тега <IMG>, как показано в примере 1. Здесь, однако, кроется одна хитрость. Когда на странице задан строгий <!DOCTYPE>, то между изображений возникает пустой промежуток, убрать который поможет атрибут line-height, его следует указать для контейнера, в котором хранятся изображения, обычно это тег <P> или <DIV>.

Пример 1. Использование тега <BR>

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Изображения по вертикали</title> <style type="text/css"> .img { line-height: 1px; /* Межстрочное расстояние */ } </style> </head> <body> <p class="img"><img src="images/ecctitle.png" alt="Название" width="640" height="158"><br> <img src="images/navigate.png" alt="Навигация" width="640" height="30"></p> </body>
</html>Результат данного примера показан на рис. 1. Изображения располагаются внутри контейнера <P> и разделяются тегом <BR>. Поскольку в примере используется строгий <!DOCTYPE>, то для состыковки изображений без пробелов в стилях указывается атрибут line-height со значением 1px. Те же рисунки без состыковки показаны на рис. 2.



Рис. 1. Два изображения, состыкованные по вертикали



Рис. 2. Промежуток между изображениями

Можно обойтись и без тега <BR>, поместив изображения в слой фиксированной ширины, значение которой совпадает с шириной рисунков. Перенос изображений друг под друга произойдет автоматически (пример 2).

Пример 2. Фиксированная ширина

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Изображения по вертикали</title> <style type="text/css"> .center { margin: 0 auto; /* Выравнивание блока по центру */ width: 640px; /* Ширина блока */ line-height: 1px; /* Межстрочное расстояние */ } </style> </head> <body> <div class="center"> <img src="images/ecctitle.png" alt="Название" width="640" height="158"> <img src="images/navigate.png" alt="Навигация" width="640" height="30"> </div> </body>
</html>

В браузере Internet Explorer в результате выполнения данного примера возможно появление промежутка между изображениями. Известная ошибка этого браузера решается просто. Достаточно теги <IMG> в коде примера записать в одну строку без пробелов и переносов.