@Tempest99

Изображение вылезает за границу блока при адаптиве,как исправить?

Как сделать так,чтобы изображение при любом размере белого блока автоматически сжималось и подстраивалась под размер?
5c15a08ae19ea915692240.jpeg
<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;
}
  • Вопрос задан
  • 183 просмотра
Решения вопроса 1
RAX7
@RAX7
Для изображений добавь:
max-width: 100%;
width: 100%;
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
LenovoId
@LenovoId
svg, css,js
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы