Масштабирование изображения

Veseloff · February 25, 2010

Можно ли бесскриптовым методом сжать изображение ровно в два раза? То есть имеем изображение m х n пикселей (m и n неизвестны) и надо вывести изображение, чтобы оно было m/2 х n/2 пикселей. Это реально?

Great Rash · February 25, 2010

Ну задать изображению ширину и высоту ручками. А как еще без скриптов? CSS выражения не поддерживает вроде.

Veseloff · February 25, 2010

Ручками не получится, ибо ширина и высота неизвестны, а уменьшить надо не до какого-то предела, а просто в два раза.

shvv · February 25, 2010

Ручками не получится, ибо ширина и высота неизвестны, а уменьшить надо не до какого-то предела, а просто в два раза.

width: 50%;

Great Rash · February 25, 2010

Ручками не получится

Ну тогда скрипты. Третьего варианта нету.

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

shvv, 50% надо брать от чего-то...

Veseloff · February 25, 2010

width: 50%;

Гы. Нет, конечно Это получится ширина относительно родительского элемента

shvv · February 25, 2010

Гы. Нет, конечно Это получится ширина относительно родительского элемента

Признаюсь, придумал не сам http://chikuyonok.ru/html-css/

Great Rash · February 25, 2010

По ссылке совсем не про то написано...

shvv · February 25, 2010

По ссылке совсем не про то написано...

Ну, как хотите. Мое дело предложить.

rus · February 25, 2010

Можно ли бесскриптовым методом сжать изображение ровно в два раза? То есть имеем изображение m х n пикселей (m и n неизвестны) и надо вывести изображение, чтобы оно было m/2 х n/2 пикселей. Это реально?

Без скриптов никак. А картинки где жать надо? Если на локали, то прогой мона.

Veseloff · February 25, 2010

Кагбэ я понимаю, что "чистыми" методами этого не сделать. Меня интересуют "грязные хаки". Я изобрёл такой:

<div style="position: relative; display: inline-block;">
	<img src="image.jpg" style="opacity: 0;">
	<img src="image.jpg" style="position: absolute; top: 0; left: 0; width: 50%; height: 50%;">
</div>

Но это не до конца подходит - всё-таки остаются торчать "невидимые границы" справа и снизу. Вот и интересуюсь - вдруг кто-то уже делал такое

rus · February 25, 2010

То есть, тупо обрезать границы картинки блоком в который она помещена?

Может тогда оверфлоу:хидден?

shvv · February 25, 2010

shvv, 50% надо брать от чего-то...

Сглупил немного.

Но если у родителя ширина явно не указана, то работает.

Great Rash · February 25, 2010

Кагбэ я понимаю, что "чистыми" методами этого не сделать. Меня интересуют "грязные хаки"

Кстати, отличный метод! Ща поколдуем.

Great Rash · February 25, 2010

Пока только так... как влево сдвинуть, чтоб блок ужался ума не приложу + в ИЕ не тестил.


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Фильтр</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
		}

		body {
			margin: 10px;
		}

		div {
			display: inline-block;
		}

		.c {
			position: relative;
			overflow: hidden;
			border: 1px solid;
		}

		.c2 {
			position: relative;
			margin: -50% 0 0 -50%;
		}
	</style>

</head>

<body>

	<div class="c">
		<div class="c2">
			<img src="img/test.png" alt="" style="visibility: hidden;" />
			<img src="img/test.png" alt="" style="position: absolute; top: 50%; left: 50%; width: 50%; height: 50%;" />
		</div>
	</div>
	text text text

</body>
</html>

Sign In

Масштабирование изображения

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information