@flare0n

Как сделать так, чтобы картинка не наследовала ширину и высоту собственной колонки?

Вот как у меня выглядит на сайте:
Скрин
5be50f13ac51f933542676.png

А вот как выглядит это в psd:
Скрин
5be50f4dbbaa6409463801.png


Так же прилагаю
коды блока
<section class="information">
    <div class="container">
      <div class="row">
        <div class="col-7">
          <div class="information__block-text">
            <h2 class="information__title">Lorem ipsum dolor sit amet consectetur!</h2>

            <p class="information__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.aliquip ex ea commodo consequat.</p>
            
            <p class="information__text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
            <p class="information__text">Sed ut perspiciatis unde omnis iste natus error sit</p>
            <button class="button">Read more</button>
          </div>          
        </div>
        <div class="col-5">
          <div class="information__img">
            <img src="img/information/information_1.jpg" alt="Velocopter">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-7">
          <div class="information__img">
            <img src="img/information/information_2.jpg" alt="Velocopter">
          </div>
        </div>
        <div class="col-5">
          <p class="information__text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
          </p>
        </div>
      </div>
    </div>
  </section>

.information
	padding-top: 100px
	&__block-text
		margin-right: 88px
	&__title
		margin-top: 99px
		margin-bottom: 49px
		font-size: 60px
		font-weight: 400
		line-height: 60px
	&__text
		margin-bottom: 38px
		font-size: 18px
		font-weight: 300
		line-height: 28px
		letter-spacing: 1.08px
	&__img
		height: 100%
		width: 100%
	.row
		margin-bottom: 100px
.

Пробовал делать .container-fill, но это приводит к тому, что приходится делать отступы каждому блоку.
  • Вопрос задан
  • 259 просмотров
Решения вопроса 2
Картинка растягивается на 100% ширины блока.

height тянется пропорционально.

Убери height и ограничь max-width;
Ответ написан
Комментировать
@flare0n Автор вопроса
Проблема решена. В файле reset.css было установлено значение
img {
  max-width: 100%;
}


После того как убрал, картинка стала нормальной по размерам. Внутренние отступы помогли отрегулировать блок текста. А так же, как оказалось, у текста 7 колонок, а у картинки - 5
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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