Как промаштабировать картинку под размер div?

neiro · April 21, 2011

Есть div определенного размера. И есть картинка размера гораздо большего чем размер divа.

Понятно что можно вставить картинку в html с помощью img и задать width="100%". Но хотелось бы через стиль.

Простейший код:


<html>
    <head>
	<link rel="stylesheet" type="text/css" media="screen" href="cascade.css" />
    </head>

    <body>
	<div id="header"></div>
    </body>
</html>

#header {
	height:  200px;
	background-image: url(head.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-color: #ffff00;
	color: #ffffff;
	text-align: right;
}

Спасиб!

Edited April 21, 2011 by neiro

Justnewone · April 21, 2011

через стиль кроссбраузерно пока (за исключением ИЕ6) - хедеру релейтив, внутрь картинку, ей абсолют и лефт:0, райт:0, ну или, если надо, топ с боттомом тоже.

когда все будут поддерживать CSS3 - тогда background-size: cover;

neiro · April 21, 2011

мда плохо быть нубом..... Можно вас попросить написанное выше преобразовать в код..(ну или хотяб вот эту часть "хедеру релейтив, внутрь картинку, ей абсолют")

Спасиб!

Edited April 21, 2011 by neiro

Justnewone · April 21, 2011

<html>
    <head>
        <link rel="stylesheet" type="text/css" media="screen" href="cascade.css" />
    </head>

    <body>
        <div id="header"><img /></div>
    </body>
</html>

#header {
        position:relative;
        height:  200px;
        background-image: url(head.jpg);
        background-repeat: no-repeat;
        background-position: left top;
        background-color: #ffff00;
        color: #ffffff;
        text-align: right;
}

#header IMG{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
}

Свойства для #header IMG изменить/добавить/удалить по вкусу.

Gaspode · April 21, 2011

Мм, а так?

<style>
   div.preved img {
      width: 100%;
   }
</style>

<div class="preved">
  <img ... />
</div>

UPD

А, она фоном нужна. Пардон, вопрос снимается =)

Edited April 21, 2011 by Gaspode

neiro · April 21, 2011

гадство,Чет не пашет. Тож самое...

может еще какой вариант есть?

Gaspode · April 21, 2011

Ну, если можно картинку вставлять в разметку, то предложенный мной вариант работает как надо. Лучше даже width заменить на max-width.

Edited April 21, 2011 by Gaspode

Sign In

Как промаштабировать картинку под размер div?

Question

neiro

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

neiro

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

neiro

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information