Как сделать так,чтобы изображение при любом размере белого блока автоматически сжималось и подстраивалась под размер?
<section class="price">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="section-header section-header-light">
<h2>Цены</h2>
<p>Выберите вариант,который подходит Вам :</p>
</div>
</div>
<div class="col-md-4 section-header section-header-light ">
<button class="button hvr-grow">Рассчитать точную стоимость</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="price-block">
<h3>Штукатурка вашим материалом</h3>
<img src="img/price/1.jpg" alt="">
<span class="price-tag">от <strong>300</strong> руб/м<sup>2</sup></span>
<ul class="price-list">
<li>Провеление работ</li>
<li>Уборка</li>
</ul>
<button class="button hvr-glow">Заказать</button>
</div>
</div>
<div class="col-md-4">
<div class="price-block">
<h3>Штукатурка под шпатлевку</h3>
<img src="img/price/2.jpg" alt="">
<span class="price-tag">от <strong>530</strong> руб/м<sup>2</sup></span>
<ul class="price-list">
<li>Завоз материала и его подъем</li>
<li>Проведение работ</li>
<li>Уборка</li>
<li>Гарантия 2 года</li>
</ul>
<button class="button hvr-glow">Заказать</button>
</div>
</div>
<div class="col-md-4">
<div class="price-block">
<h3>Штукатурка под обои</h3>
<img src="img/price/3.jpg" alt="">
<span class="price-tag">от <strong>560</strong> руб/м<sup>2</sup></span>
<ul class="price-list">
<li>Завоз материала и его подъем</li>
<li>Проведение работ</li>
<li>Уборка</li>
<li>Гарантия 2 года</li>
<li>Можно сразу клеить обои</li>
</ul>
<button class="button hvr-glow">Заказать</button>
</div>
</div>
</div>
</div>
</section>
.price {
text-align: center;
background: #f8af01 url(../img/price/prices-bg.jpg) center center repeat;
background-size: cover;
min-height: 100vh;
}
.price button {
font-size: 1.5rem;
padding: 2rem;
margin-top: 1.3rem;
}
.price .order {
width: 20rem;
margin-bottom: 3.5rem;
}
.price-block {
padding: 2rem 3rem;
background-color: #ffffff;
min-height: 18rem;
-webkit-box-shadow: 7px 12px 21px 0px rgba(0, 0, 0, 0.17);
box-shadow: 7px 12px 21px 0px rgba(0, 0, 0, 0.17);
}
.price-block h3 {
font-size: 1.9rem;
line-height: 1.053;
font-family: 'ProximaNova_bold', sans-serif;
}
.price img {
padding: 3rem 0rem;
}
.price-tag {
font-size: 2.2rem;
font-family: 'ProximaNova_bold', sans-serif;
}
.price-tag strong {
font-size: 2.5rem;
}
.price-list {
min-height: 15rem;
font-size: 1.6rem;
line-height: 1.667;
margin-top: 4rem;
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
}
.price-list li {
list-style: none;
}
.price-list li:before {
content: '';
display: inline-block;
background: url(../img/price/check.svg) center no-repeat;
width: 1.4rem;
height: 1.4rem;
background-size: 100%;
margin-right: 1rem;
}
Простой
