Set maximum height to images to avoid extension of page size

This commit is contained in:
Pixelguy14 2024-11-06 14:13:54 -06:00
parent 1dd7eed839
commit d30b5d173b

View File

@ -53,15 +53,15 @@
<p></p> <p></p>
<q-btn id="ijhjl-2" color="primary" icon="arrow_back" label="Previous" v-on:click="ImgMinus = true"></q-btn> <q-btn id="ijhjl-2" color="primary" icon="arrow_back" label="Previous" v-on:click="ImgMinus = true"></q-btn>
<q-btn id="i3zt1" color="primary" icon="arrow_forward" label="Next" v-on:click="ImgPlus = true"></q-btn> <q-btn id="i3zt1" color="primary" icon="arrow_forward" label="Next" v-on:click="ImgPlus = true"></q-btn>
<div id="image-container" class="row col-12"> <div id="image-container" class="row col-12 items-center">
<div class="col-10"><q-img id="i6e3p" :src="test"></q-img></div> <div class="col-10"><q-img id="i6e3p" :src="test" style="max-height: 500px; max-width: 100%; object-fit: contain;" class="q-ma-none q-pa-none"></q-img></div>
<div class="col-2"><q-img id="colorbar" :src="colorbar"></q-img></div> <div class="col-2"><q-img id="colorbar" :src="colorbar"></q-img></div>
</div> </div>
<p>{{msgimg}}</p> <p>{{msgimg}}</p>
<q-btn id="ijhjl-2-2" color="primary" icon="arrow_back" label="Previous" v-on:click="ImgMinusT = true"></q-btn> <q-btn id="ijhjl-2-2" color="primary" icon="arrow_back" label="Previous" v-on:click="ImgMinusT = true"></q-btn>
<q-btn id="i3zt1-2" color="primary" icon="arrow_forward" label="Next" v-on:click="ImgPlusT = true"></q-btn> <q-btn id="i3zt1-2" color="primary" icon="arrow_forward" label="Next" v-on:click="ImgPlusT = true"></q-btn>
<div id="image-container" class="row col-12"> <div id="image-container" class="row col-12 items-center">
<div class="col-10"><q-img id="i6e3p-2" :src="testT"></q-img></div> <div class="col-10"><q-img id="i6e3p-2" :src="testT" style="max-height: 500px; max-width: 100%; object-fit: contain;" class="q-ma-none q-pa-none"></q-img></div>
<div class="col-2"><q-img id="colorbar-2" :src="colorbarT"></q-img></div> <div class="col-2"><q-img id="colorbar-2" :src="colorbarT"></q-img></div>
</div> </div>
<p>{{msgtriq}}</p> <p>{{msgtriq}}</p>