Hot to dynamically fit / scale multiple Q-Img in row container?

[mrvn]

When I am trying to fit multiple or even just one image(s) into the container, the image size is exceeding the row and even the page size, which causes the page to scroll.

I want the images to scale to the middle row, not interfering with any of the other rows at all.

I had a deep look into the css guide and tried a lot of different class / element combinations, but I just doesn’t work…
Basically my template looks like the following:

<q-page-container>
  <q-page>
    <div class="row">
      ...
    </div>
    <div class="row">
      <div class="col" v-for="img in images">
        <q-img contain :src="img.src" />
      </div>
    </div>
    <div class="row">
      ...
    </div>
    </div>
  </q-page>
</q-page-container>

[dobbel]

@mrvn
We can help you better if you create a codepen to demonstrate the problem.