Получение изображения, чтобы растянуть div

Question

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

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

However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the image.

Here is the CSS for the DIV (the grey box):

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

CSS, применяемый к изображению:

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

Итак, как мне это исправить?

Answer 1

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

Answer 2

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

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

Answer 3

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

Вот как должен выглядеть класс:

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

Answer 4

Предполагая, что @Джон Милликин правильный, код

.product + * { clear: left; }

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

Answer 5

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

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

    width:500px;
    height:500px;
}

Answer 6

Это похоже на работу для clearfix для меня ...

Answer 7

display:inline  
float:left  

ваша проблема

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

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