Дрессировка кошек

yarikus · February 25, 2011

Помогите выполнить задачу. Необходимо, чтобы морда кошки оставалась на месте, а при изменении размеров окна зарезалась левая часть фотографии. Пробовал привязывать к правой стороне с отрицательными отступами в процентах, но фотография не всегда была вплотную. Надеюсь понятно выразился.

Пример: http://jsfiddle.net/eZ2y2/embedded/result/

HTML:

<div id="wrapper">
	<div style="height: 1000px;">content</div>
</div>
<img id="photo" src="http://basik.ru/images/firecat/short.jpg">

CSS

#wrapper {
	width: 400px;
	background: red;
	margin: 0 auto;
	opacity: 0.5;
}
#photo {
	border: 1px solid blue;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	height: 100%;
	margin-left: -400px;
	min-height: 436px;
}

SelenIT · February 25, 2011

А положить картинку фоном прямо на контентный блок, с привязкой к правому краю (background-position: 100% 0), нельзя?

yarikus · February 25, 2011

А положить картинку фоном прямо на контентный блок, с привязкой к правому краю (background-position: 100% 0), нельзя?

Одно из условий, что фоновая картинка должна быть height 100%, а изменение размеров background не поддерживает.

klierik · February 25, 2011

#photo {
	border: 1px solid blue;
	height: 100%;
	left: 50%;
	margin-left: -1117px;
	min-height: 436px;
	position: fixed;
	top: 0;
	z-index: -1;
}

yarikus · February 25, 2011

Вроде бы работает, спасибо!

yarikus · February 26, 2011

Все-таки не работает: если сделать слишком широкое окно, то перестает прилегать к левой стороне.

psywalker · February 26, 2011

Все-таки не работает: если сделать слишком широкое окно, то перестает прилегать к левой стороне.

Дружище, а я так понял, что должно быть так:

1. Кошка всегда прижата к левому края, растянута на весь экран и не прокручивается.

2. При сужении экрана по ширине она должна уходить влево за экран

Пральна? Если да, то при каком сужении? И на сколько должна уходить?

yarikus · February 26, 2011

Дружище, а я так понял, что должно быть так:
1. Кошка всегда прижата к левому края, растянута на весь экран и не прокручивается.
2. При сужении экрана по ширине она должна уходить влево за экран
Пральна? Если да, то при каком сужении? И на сколько должна уходить?

Да, правильно понял. Сразу должна уходить, как уменьшается ширина окна, а уходить может полностью. Вообще главное, чтобы морда кошки была на виду.

В оригинале на сайте лицо девушки и получается не хорошо, когда контент ее закрывает.

psywalker · February 26, 2011

Лови дружище

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Увеличительное стекло</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}

	#img { 
		position: fixed; 
		height: 100%; 
		left: 0; 
		top: 0;
		width: 400px;

	}

</style>
</head>

<body>
	<img src="short.jpg" id="img" alt="Cat" />



<script type="text/javascript">
	var img = document.getElementById('img');
	img.style.left = 0;
	var imgX = parseInt(img.style.left);
	var x = 0;
	window.onresize = function(){
		if(document.documentElement.clientWidth < screen.availWidth/2){

			var w = Math.abs(document.documentElement.clientWidth - screen.availWidth/2);
			img.style.left= -w+'px';
		}else {
			if( imgX >= 0){x = 0;return;}
			imgX = parseInt(img.style.left);
			var w = Math.abs(document.documentElement.clientWidth - screen.availWidth/2);
			img.style.left= imgX+w+'px';
		}
	}
</script>
</body>

</html>

yarikus · February 27, 2011

psywalker, спасибо!

psywalker · February 27, 2011

psywalker, спасибо!

И тебе дружище! Почаще приходи

Sign In

Дрессировка кошек

Question

Link to comment

Share on other sites

10 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

Join the conversation

Обсуждения

Important Information