Получение изображения для растягивания div

Как я могу получить изображение, чтобы растянуть высоту класса DIV?

В настоящее время это выглядит так:

http://i36.tinypic.com/34osrdg.png

Однако, я бы хотел, чтобы DIV растягивался, чтобы изображение правильно помещалось, но я не хочу изменять размер изображения.

Вот CSS для DIV (серый квадрат):

.product1 {
    width: 100%;
    padding: 5px;
    margin: 0px 0px 15px -5px;
    background: #ADA19A;
    color: #000000;
    min-height: 100px;
}

CSS применяется к изображению:

.product{
    display: inline;
    float: left;
}

Итак, как я могу это исправить?

Ответ 1

Добавить overflow:auto; в .product1

Ответ 2

В разметке после изображения вставьте что-то вроде <div style="clear:left"/>. Немного беспорядочно, но это самый простой способ, который я нашел.

И пока вы на нем, поместите немного поля на это изображение, чтобы текст не касался его.

Ответ 3

Предполагая, что @John Millikin верен, код

.product + * { clear: left; }

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

Ответ 4

Один трюк, который вы можете использовать, заключается в том, чтобы скрыть свойство переполнения <div>. Это заставляет браузеры вычислять физический размер окна и исправляет странную проблему перекрытия с плавающим изображением. Это избавит вас от добавления дополнительной HTML-разметки.

Вот как выглядит класс:

.product1 {
    width: 100%;
    padding: 5px;
    margin: 0px 0px 15px -5px;
    background: #ADA19A;
    color: #000000;
    min-height: 100px;
    overflow: hidden;
}

Ответ 5

Это выглядит как работа для clearfix мне...

Ответ 6

Попробуйте следующее:

.Strech
{
    background:url(image.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;

    width:500px;
    height:500px;
}

Ответ 7

display:inline  
float:left

является вашей проблемой

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

Обновление:. После просмотра вашей ссылки. Проблема с высотой, отображаемая, заключается в том, что поплавки не очищаются.