camka
не самка
CSS - Отцентровать картинку в контейнере.
Необходимо горизонтально и вертикально отцентровать картинку <img> произвольного размера во внешнем контейнере с заданными размерами так, чтобы если даже размеры картинки больше размеров контейнера, картинка бы оставалась отцентрованой, и ее края прятались бы за краями контейнера - то есть, центр картинки должен в любом случае совпадать с центром контейнера.
Результат должен быть аналогичен тому, что можно добиться, установив картинку в качестве заднего плана для контейнера, позиционировав его в центре и запретив ему повторяться. Однако в данном случае принципиально, что используется элемент img.
На данный момент удалось реализовать задумку в ИЕ и Опера. Возможно, кто-то знает, что надо сделать, для того, чтобы этот код работал бы в ФФ тоже.
Необходимо горизонтально и вертикально отцентровать картинку <img> произвольного размера во внешнем контейнере с заданными размерами так, чтобы если даже размеры картинки больше размеров контейнера, картинка бы оставалась отцентрованой, и ее края прятались бы за краями контейнера - то есть, центр картинки должен в любом случае совпадать с центром контейнера.
Результат должен быть аналогичен тому, что можно добиться, установив картинку в качестве заднего плана для контейнера, позиционировав его в центре и запретив ему повторяться. Однако в данном случае принципиально, что используется элемент img.
На данный момент удалось реализовать задумку в ИЕ и Опера. Возможно, кто-то знает, что надо сделать, для того, чтобы этот код работал бы в ФФ тоже.
Код:
[SIZE=2]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Center</title>
<style type="text/css">
span {
float: left; border: 1px solid black;
margin: 1px; overflow: hidden;
width: 75px; height: 75px; position: relative; }
a { position: absolute; left: 50%; top: 50%; }
img {
position: relative; left: -50%; top: -50%;
vertical-align: middle; border: 0px; }
</style>
</head>
<body>
<span><a href="#"><img
src="http://farm1.static.flickr.com/49/148093302_acb4062fbd_m.jpg"
alt="big"></a></span>
<span><a href="#"><img
src="http://farm1.static.flickr.com/79/buddyicons/[email protected]?1161129422"
alt="small"></a></span>
</body>
</html>
[/SIZE]