Jump to content
  • 0

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

Mal4ishnik

Asked by Mal4ishnik,

 Share

Question

Mal4ishnik Explorer

Mal4ishnik

Posted
Posted

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

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

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

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

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
Mal4ishnik Explorer

Mal4ishnik

Posted
  • Author
Posted 

<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 не увидели, потому что мне надо применить другое решение?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept