wild flower
The Problem:
When i resize my window by mouse-click-dragging the corner of the window, i want the imported images to resize accordingly (bigger image when i make the window bigger and smaller when i shrink the window). I also always want my images to tile horizontally the full view distance (which it already does). I'm assuming that this is a "height" or "parent div container" issue but i cant seem to figure it out. I've tried using VH, VW, %, h-screen, h-fit, h-full, etc but i cant get the desired effect 😦
Currently, the height is static to h-96 and h-48. When i shrink the window, the image height stays the same. Any thoughts or solution to this?
Edit: I want it to resize dynamically to the screen size, not set a mobile, sm, md, lg size settings.
---
import { Image, getImage } from "astro:assets";
import grass from "../images/GRASS.png";
import clouds from "../images/CLOUDS.png";
const grassTile = await getImage({ src: grass, format: "avif" });
const cloudsTile = await getImage({ src: clouds, format: "avif" });
---
<body class="overflow-hidden bg-zinc-900">
<div class="container1 mx-auto">
<div
class="sky relative bg-gradient-to-t h-[74.5vh] from-rose-400 to-violet-900 z-20"
>
</div>
<div class="flex">
<div
style=`background-image: url(${cloudsTile.src})`
class="absolute h-96 w-full -my-[475px] animate-move-right2 z-50"
>
</div>
</div>
<div class="flex">
<div
style=`background-image: url(${grassTile.src})`
class="absolute h-48 w-full -my-24 animate-move-right z-50"
>
</div>
</div>
<div
class="ground relative h-[17.5vh] bg-gradient-to-t from-gray-950 from-0% to-amber-950 to-95% z-40"
>
</div>
</div>
</body>
hoary fog
