Отцентрировать и обрезать изображение по краям
Всем привет.
Ситуация такая, есть фотки, которые пропорционально уменьшаются до нужного размера по ширине, но также есть ещё некая высота блока превышая которую картинка должна "обрезаться". У меня картинка прижимается по верху и из-за этого если картинка после пропорционального уменьшения не совсем чётко помещается, то бывает, что отрезается "полезная" часть снизу. Что сейчас: http://clip2net.com/s/1Lr0X Что нужно: http://clip2net.com/s/1LrmT *центрируем фотку по вертикали, всегда какой бы она не была по высоте и обрезаем её до нужного размера но симметрично сверху и снизу; **бекграунды с background-position не совсем подходят, придумать бы позиционирование и центрирование с обрезанием обычных img в блоках.. Реально ли такое осуществить? |
1. устанавливаешь у блока overflow: hidden;
2. получаешь высоту картинки 3. получаешь высоту блока. 4. из высоты картинки вычитаешь высоту блока и делишь на 2 5. поднимаешь картинку на полученное из п.3 значение |
Благодарю, это может быть вариантом.
|
Цитата:
|
Ну в принципе можно конечно ещё поизвращаться в плане не делать img'ом, а хранить где-то в атрибуте каком-то блока, например, путь к картинке, потом делать блоку бекграунд с этой картинкой и типо background-position: center center;
|
Цитата:
(в 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>
|
Цитата:
гораздо проще сделать одно правило, на js (в вычисления через css я не лезу, хотя тоже можно постараться) для всех :) |
Цитата:
не нравится .outer + .outer + ... можно присвоить отдельные классы элементам, либо по другому расположить Цитата:
|
Цитата:
|
Делайте как хотите, но лучше приводите работающие примеры кода. Это будет полезнее для посетителей сайта.
|
| Часовой пояс GMT +3, время: 18:08. |