How can I prevent an image from inheriting its own column width and height?

Question

css

Here's what it looks like on my site:

Screen

And here is what it looks like in psd:

Screen

I am also attaching

block codes

<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

.
I tried doing .container-fill, but this leads to the fact that I have to indent each block.

Answer 1

The image is stretched to 100% of the block width.
height is stretched proportionally.
Remove height and limit max-width;