Форум

dr_gluk · #1 (**permalink**) 02.04.2012, 19:06

Всем привет.

Ситуация такая, есть фотки, которые пропорционально уменьшаются до нужного размера по ширине, но также есть ещё некая высота блока превышая которую картинка должна "обрезаться".
У меня картинка прижимается по верху и из-за этого если картинка после пропорционального уменьшения не совсем чётко помещается, то бывает, что отрезается "полезная" часть снизу.
Что сейчас:
http://clip2net.com/s/1Lr0X

Что нужно:
http://clip2net.com/s/1LrmT
*центрируем фотку по вертикали, всегда какой бы она не была по высоте и обрезаем её до нужного размера но симметрично сверху и снизу;
**бекграунды с background-position не совсем подходят, придумать бы позиционирование и центрирование с обрезанием обычных img в блоках..

Реально ли такое осуществить?

T-sh · #2 (**permalink**) 02.04.2012, 19:31

1. устанавливаешь у блока overflow: hidden;
2. получаешь высоту картинки
3. получаешь высоту блока.
4. из высоты картинки вычитаешь высоту блока и делишь на 2
5. поднимаешь картинку на полученное из п.3 значение

dr_gluk · #3 (**permalink**) 03.04.2012, 10:07

Благодарю, это может быть вариантом.

T-sh · #4 (**permalink**) 03.04.2012, 11:29

Сообщение от dr_gluk

Благодарю, это может быть вариантом.

как я понимаю, это вообще единственный вариант

dr_gluk · #5 (**permalink**) 03.04.2012, 13:08

Ну в принципе можно конечно ещё поизвращаться в плане не делать img'ом, а хранить где-то в атрибуте каком-то блока, например, путь к картинке, потом делать блоку бекграунд с этой картинкой и типо background-position: center center;

Pavel M. · #6 (**permalink**) 03.04.2012, 15:19

Сообщение от 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>

T-sh · #7 (**permalink**) 03.04.2012, 19:17

Сообщение от Pavel M.

можно растянуть по ширине и выровнять картинки, например, так
(в ie7 не будет работать)
overflow: hidden закомментировал для наглядности

<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>

вот только, если картинок будет очень много, будет крайне неудобно иметь в стилях десятки .outer + .outer + ... + .outer

гораздо проще сделать одно правило, на js (в вычисления через css я не лезу, хотя тоже можно постараться) для всех

Pavel M. · #8 (**permalink**) 03.04.2012, 21:58

Сообщение от T-sh

вот только, если картинок будет очень много, будет крайне неудобно иметь в стилях десятки .outer + .outer + ... + .outer

.outer + .outer только для того чтобы расположить три примера, которые я привел по горизонтали

не нравится .outer + .outer + ... можно присвоить отдельные классы элементам, либо по другому расположить

Сообщение от T-sh

гораздо проще сделать одно правило, на js

по-моему на JS расположение элементов лучше делать, когда нельзя либо сложно сделать это на css

T-sh · #9 (**permalink**) 03.04.2012, 23:08

Сообщение от Pavel M.

по-моему на JS расположение элементов лучше делать, когда нельзя либо сложно сделать это на css

ну это как раз и тот случай, когда сложно сделать на css для неизестного количества элементов

писать скрипт, так уж писать универсальный

к тому же никаких костылей под IE <8 делать не надо.

Pavel M. · #10 (**permalink**) 04.04.2012, 10:31

Делайте как хотите, но лучше приводите работающие примеры кода. Это будет полезнее для посетителей сайта.

Форум

Справочник

Discord чат

Курсы javascript