Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Как вписать IMG в DIV по высоте

Автор: Antonio1981 26.10.2010, 10:45

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

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

Автор: Rayled 26.10.2010, 12:21

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

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

)

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

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

Автор: Antonio1981 26.10.2010, 13:27

Вот код:

Код


<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

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

Автор: Antonio1981 26.10.2010, 14:49

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

)

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

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

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

Автор: FightInGlory 27.10.2010, 09:58

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