Растягивающийся фон

Mal4ishnik · October 27, 2010

Всем привет, в процессе верстки столкнулся с проблемой которую нужно решить средствами css и html.

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

К примеру есть картинка 3:4, если размер экрана становится узким по высоте(3:10 например), тогда картинка растягивается по ширине сохраняя пропорции. А если узким по ширине, тогда растягивается по высоте сохраняя пропорции.

Соответственно так как пропорции сохраняются часть картинки просто не показывается, остается за пределам браузера, скрол не показывается.

Great Rash · October 27, 2010

JavaScript

SelenIT · October 27, 2010

Как вариант — использовать в качестве подложки flash со scale="noborder" и картинкой в качестве единственного содержимого.

Great Rash · October 27, 2010

Это какое-то мега-извращение получится

SelenIT · October 27, 2010

Ну да. Зато нужная обрезка получится автоматом

Mal4ishnik · October 27, 2010

флеш не подходит , у меня нет мыслей по поводу решения, пока только джаваскриптом сделал

psywalker · October 27, 2010

флеш не подходит , у меня нет мыслей по поводу решения, пока только джаваскриптом сделал

А покажи страницу с решением.

Mal4ishnik · October 27, 2010

<html>
<head>
<style type="text/css">
html, body { overflow:hidden; }

img {
	min-height:1000px;
	min-width:1600px;
 width:expression(document.body.clientWidth < 1600? "1600px": "auto" );
}
</style>
	<script type="text/javascript" src="jquery.js"></script>
	<script src="jquery.maximage.js" type="text/javascript" charset="utf-8"></script>
	<script>


		$(function(){
			jQuery('img.bgmaximage').maxImage({
			  isBackground: true,
			verticalAlign: 'top'
		 	});
		});


	</script>
	</head>
	<body>

	<img class="bgmaximage" src="i/fon.jpg">
</body>
</html>

Могу выложить на сервер если надо, но вечером. Используются библиотеки джкуэри и jquery.maximage, в ie6-7 min-width, min-height не работают, там картинка будет погонятся под размер экрана, даже если она большая и ее не обязательно сжимать.

да и еще как мне сделать так, чтобы строку <img class="bgmaximage" src="i/fon.jpg"> IE6-7 не увидели, потому что мне надо применить другое решение?

npofopr · October 28, 2010

http://nooshu.com/jquery-plug-in-scalable-background-image/

а так не нравится?

Sign In

Растягивающийся фон

Question

Mal4ishnik

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Mal4ishnik

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Mal4ishnik

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information