<img> background

Телевизор · October 3, 2012

Здравствуйте, подскажите пожалуйста...

Имеется на странице блок по центру с минимальной min-width и максимальной max-width шириной.

Внутри блока, панорамная картинка с фиксированными размерами:

<img src="head.jpg" alt="" height="487" width="1260">

В css правило чтобы картинка <img src... автоматически подгонялось под размеры внешнего блока (уменьшается увеличивается картинка в зависимости от монитора)

img {
    height: auto;
    width: 100%;
}

Как же сделать тоже самое только в место <img src= прописать правильно background в css? Химичил-Химичил получалось только фиксированные фоновый рисунок...

————--

При регистрации я впервые в жизни мельком прочитал правила форума - Отличное форматирование текста.

Edited October 3, 2012 by Телевизор

Sensei · October 4, 2012

http://htmlbook.ru/css/background-size

Телевизор · October 4, 2012

пфффф, что-то совсем никак (((((((

помогите пожалуйста,

Наверно у меня не получается из за того что я что-то не знаю.

<!DOCTYPE HTML>
<html><head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
		body {
			font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
			background: #e3c395;
			margin: 0;
			padding: 0;
			color: #000;
		}
		.container {
			width: 80%;
			max-width: 1260px;
			min-width: 780px;
			background: #FFF;
			margin: 0 auto;
			overflow: hidden;
		}
		.headr img {
			height:auto; 
			width:100%;
		}
		.container .content {
			padding: 50px 10px 50px 10px;
			float: left;
		}
	</style>
</head><body>

<div class="container">
	<div class="headr">
		<img src="head.jpg" width="1261" height="487">
	</div>
	<div class="content">
		text 
	</div>
</div>

</body></html>

Sensei · October 4, 2012

так? http://jsfiddle.net/sensei/VkGc4/

если нужно без искажений, используйте значения "cover" или "contain"

Телевизор · October 4, 2012

Абалденный эффект Вы показали возьму на заметку...

Вообще я имел ввиду так http://jsfiddle.net/fepaW/

И когда при разных разрешениях монитора картинка скукоживается или увеличивается.

А вот как вместо img на css написать чтобы с таким же эффектом был - непонимаю.

Попробуйте в просмотрощике увеличить окно result и Вы увидите тот эффект...

Edited October 4, 2012 by Телевизор

Телевизор · October 4, 2012

получается что это не решаемо?

Sensei · October 4, 2012

не очень понимаю, что именно вам нужно

может быть так? http://jsfiddle.net/sensei/VkGc4/2/

Edited October 4, 2012 by Sensei

Телевизор · October 4, 2012

ДААААААААААААааааааааааааааааааааа-а-а-а-а-а-а-а-а-а-а-а-а-а-а СПАСИБО ВАМ ОГРОМНОЕ !!!!!

я очень извеняюсь что плохо объяснил, найогромнейшее Вам спасибо очень Вам благодарен

Sign In

<img> background

Question

Телевизор

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Sensei

Link to comment

Share on other sites

Телевизор

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

Телевизор

Link to comment

Share on other sites

Телевизор

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

Телевизор

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information