change image size and ratio in drag and tick game

master
Subhodip Ghosh 2025-09-04 13:13:52 +05:30
parent e02e00c4de
commit 83663a9d33
7 changed files with 28 additions and 10 deletions

View File

@ -183,9 +183,9 @@ import Layout from '../../layouts/Layout.astro';
// console.log(audioData) // console.log(audioData)
const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data; const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
if(isMobile){ if(isMobile){
imageCustomWidth = "?width=100"; imageCustomWidth = "?width=60";
} else{ } else{
imageCustomWidth = "?width=100"; imageCustomWidth = "?width=60";
} }
const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/" const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
assetsList.left_image1 = assetsURL + left_image1 + imageCustomWidth; assetsList.left_image1 = assetsURL + left_image1 + imageCustomWidth;

View File

@ -549,6 +549,9 @@ import Layout from "../../layouts/Layout.astro";
} }
#image1, #image2, #image3, #image4, #image5, #image6{ #image1, #image2, #image3, #image4, #image5, #image6{
width: 150px; width: 150px;
height: 150px;
object-fit: contain;
border-radius: 8px;
} }
#label1, #label2, #label3, #label4, #label5, #label6{ #label1, #label2, #label3, #label4, #label5, #label6{
text-align: center; text-align: center;

View File

@ -575,6 +575,9 @@ import Layout from "../../layouts/Layout.astro";
} }
#image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{ #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{
width: 150px; width: 150px;
height: 150px;
object-fit: contain;
border-radius: 8px;
} }
#label1, #label2, #label3, #label4, #label5, #label6, #label7, #label8, #label9{ #label1, #label2, #label3, #label4, #label5, #label6, #label7, #label8, #label9{
text-align: center; text-align: center;

View File

@ -500,7 +500,10 @@ import Layout from "../../layouts/Layout.astro";
transition: border 0.5s, border-color 0.3s, transform 6s; transition: border 0.5s, border-color 0.3s, transform 6s;
} }
#image1, #image2, #image3, #image4, #image5, #image6{ #image1, #image2, #image3, #image4, #image5, #image6{
width: 240px; width: 150px;
height: 150px;
object-fit: contain;
border-radius: 8px;
} }
#label1, #label2, #label3, #label4, #label5, #label6{ #label1, #label2, #label3, #label4, #label5, #label6{
text-align: center; text-align: center;

View File

@ -535,6 +535,9 @@ import Layout from "../../layouts/Layout.astro";
} }
#image1, #image2, #image3, #image4, #image5, #image6{ #image1, #image2, #image3, #image4, #image5, #image6{
width: 150px; width: 150px;
height: 150px;
object-fit: contain;
border-radius: 8px;
} }
#label1, #label2, #label3, #label4, #label5, #label6{ #label1, #label2, #label3, #label4, #label5, #label6{
text-align: center; text-align: center;

View File

@ -561,6 +561,9 @@ import Layout from "../../layouts/Layout.astro";
} }
#image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{ #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{
width: 150px; width: 150px;
height: 150px;
object-fit: contain;
border-radius: 8px;
} }
#label1, #label2, #label3, #label4, #label5, #label6, #label7, #label8, #label9{ #label1, #label2, #label3, #label4, #label5, #label6, #label7, #label8, #label9{
text-align: center; text-align: center;

View File

@ -511,7 +511,10 @@ import Layout from "../../layouts/Layout.astro";
transition: border 0.5s, border-color 0.3s, transform 6s; transition: border 0.5s, border-color 0.3s, transform 6s;
} }
#image1, #image2, #image3, #image4, #image5, #image6{ #image1, #image2, #image3, #image4, #image5, #image6{
width: 240px; width: 150px;
height: 150px;
object-fit: contain;
border-radius: 8px;
} }
#label1, #label2, #label3, #label4, #label5, #label6{ #label1, #label2, #label3, #label4, #label5, #label6{
text-align: center; text-align: center;