VPF::Как вписать IMG в DIV по высоте - Форум программистов

Antonio1981

Дата 26.10.2010, 10:45 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 24.9.2010

Репутация: нет
Всего: нет

Здравствуйте!

Есть DIV плавающей высоты (height не задан).
В нем расположен IMG (float: left) и текст.
Высота DIV-а зависит от объема текста.
Можно ли сделать с помощью CSS так, чтобы картинка по высоте была вписана в DIV.

Rayled

Дата 26.10.2010, 12:21 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 104
Регистрация: 1.5.2010

Репутация: 3
Всего: 3

Antonio1981, что значит...

Цитата(Antonio1981 @ 26.10.2010, 10:45

)

картинка по высоте была вписана в DIV.

Можно как-то пояснее выразиться? И желательно код предоставить.

Это сообщение отредактировал(а) Rayled - 26.10.2010, 12:22

Antonio1981

Дата 26.10.2010, 13:27 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 24.9.2010

Репутация: нет
Всего: нет

Вот код:

Код


<div id="TopRec" class="Rec">
        <div id="TopHandle" class="TopHandle">Some Text</div>
    <div class="TopBlock">
              <img id="TopBlockImage" src="image.png" />             
              <h3>Lorem ipsum dolor sit amet</h3>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </div>
</div>

Css:

Код


.Rec {
    position: static;
    border: 1px solid #dbe5cf;
    background-color: #f7f7f7;
    color: #000;
    width: 95%;
    margin: 5px;
    margin-bottom: 20px;
    text-align: left;
    border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;
}

.TopHandle {
    width:25%;    
    position: relative; 
    float: right; 
    margin: 0px 0px 10px 10px; 
    border-bottom: 0;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    padding: 5px 4px;
    vertical-align: middle;
    text-transform: uppercase;
    background-image: url(img/face/ContainerTopHead.png);
    border-radius: 0px 7px 0px 0px; -moz-border-radius: 0px 7px 0px 0px; -webkit-border-radius: 0px 7px 0px 0px;
}

.TopBlock {
    padding:0px 3px 3px 3px;
}

#TopBlockImage {
       float: left;
       height: 100%; 
}

Задача такая, чтобы картинка в блоке TopBlock всегда растягивалась/сжималась по высоте этого блока (ширину не задаем, чтобы соблюсти пропорции картинки). Причем высота самого блока TopBlock переменная, т.к. объем текста в данном блоке может быть разный.
Пробовал установить для картинки min-height=100% - картинка в этом случае растягивается (и по высоте и по ширине) за пределы родительского DIV-а.

Rayled

Дата 26.10.2010, 14:31 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 104
Регистрация: 1.5.2010

Репутация: 3
Всего: 3

Antonio1981, мда, хитрая у вас задачка. И пропорции картинки соблюсти и тянуть по высоте DIV. Да, по идее тут min-height:100% для картинки установить и все должно работать. И оно работает, но только если родительскому диву высоту задать. Тк по спецификации процентный min-height работает только, если у родителя явно задана высота, чтобы было от чего отталкиваться... Не знаю, попробовал что-то сделать с вашим примером, пока не выходит...

Antonio1981

Дата 26.10.2010, 14:49 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 24.9.2010

Репутация: нет
Всего: нет

Цитата(Rayled @ 26.10.2010, 14:31

)

min-height работает только, если у родителя явно задана высота

Да, в этом случае все работает, но по задаче родительский DIV должен быть именно переменной высоты.

Rayled, спасибо за попытку.

FightInGlory

Дата 27.10.2010, 09:58 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 123
Регистрация: 14.11.2006

Репутация: 1
Всего: 1

Не знаю подойдет вам такое решение или нет, но все же.
http://www.kirupa.com/developer/mx2004/dup...ebackground.htm

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »