change image size and ratio in drag and tick game
parent
e02e00c4de
commit
83663a9d33
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue