Получение изображения для растягивания div
Как я могу получить изображение, увеличивающее высоту класса DIV?
На данный момент это выглядит так:
Однако я бы хотел, чтобы DIV был растянут, чтобы image подходил правильно, но я не хочу изменять размер изображения `.
Вот 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;
}
Итак, как я могу это исправить?
Ответы 7
display:inline
float:left
твоя проблема
Плавающий не позволяет ребенку растягивать родительскую ширину, попробуйте разместить изображение без поплавка. Если вы снимете поплавок, это должно дать желаемый эффект. Другой подход - убедиться, что вы очищаете свои поплавки в конце родительского элемента, чтобы они не расползались.
Обновлять: После просмотра ссылки Ваша проблема с высотой, как показано, связана с тем, что поплавки не очищаются.
В разметке после изображения вставьте что-то вроде <div style = "clear:left"/>. Немного беспорядочно, но это самый простой способ, который я нашел.
И пока вы это делаете, добавьте немного поля к этому изображению, чтобы текст не соприкасался с ним.
Если предположить, что @John Millikin верен, код
.product + * { clear: left; }
было бы достаточно сделать то же самое, не заставляя вас вручную настраивать код после div.
Добавить overflow:auto; в .product1
Один из приемов, который вы можете использовать, - это установить свойство переполнения <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;
}
Я считаю, что самозакрывание DIV неуместно?