|
Сообщение от dr_gluk
|
|
фотки, которые пропорционально уменьшаются до нужного размера по ширине, но также есть ещё некая высота блока превышая которую картинка должна "обрезаться".
|
можно растянуть по ширине и выровнять картинки, например, так
(в ie7 не будет работать)
overflow: hidden закомментировал для наглядности
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>test</title>
<style>
.outer {
width: 170px;
height: 100px;
border: 1px solid;
position: absolute;
/* overflow: hidden; для наглядности, для обрезки надо раскомментировать */
top: 50px;
left: 10px;
}
.outer + .outer { left: 200px; }
.outer + .outer + .outer { left: 390px; }
.inner {
height: 500%;
width: 100%;
position: absolute;
top: -200%;
}
img {
display: block;
position: absolute;
width: 100%;
height: auto;
left: 0; top: 0; bottom: 0; right: 0;
margin: auto;
opacity: .5; /* для наглядности */
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<img src="http://placehold.it/200x100">
</div>
</div>
<div class="outer">
<div class="inner">
<img src="http://placehold.it/200x170">
</div>
</div>
<div class="outer">
<div class="inner">
<img src="http://placehold.it/200x200">
</div>
</div>
</body>
</html>