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



  • 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>
    


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


Log in to reply