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

StackOverflow https://stackoverflow.com/questions/41198

  •  09-06-2019
  •  | 
  •  

Вопрос

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

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

Однако я бы хотел, чтобы 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;
}

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

Это было полезно?

Решение

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

Другие советы

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

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

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

.product + * { clear: left; }

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

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

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

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

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

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

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

    width:500px;
    height:500px;
}

display:inline  
float:left

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top