@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;
}
  • Вопрос задан
  • 36 просмотров
Решения вопроса 1
RAX7
@RAX7
Для изображений добавь:
max-width: 100%;
width: 100%;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Seldon Нижний Новгород
от 75 000 руб.
Sellfashion Нижний Новгород
от 100 000 до 150 000 руб.
16 июл. 2019, в 03:05
15000 руб./за проект
16 июл. 2019, в 02:57
5000 руб./за проект
16 июл. 2019, в 00:49
15000 руб./за проект