7 ms·

Hhmmm not sure how react helps here. I would love to see your code if you could share a gist?

hot_gril 2y ago
I'll make one when I get home. IIRC: You'd scroll down vertically on the site, through divs with different backgrounds. The initial HTML/CSS approach was nothing special, just adjacent divs with background-image with background-size options, and I tried other tricks to no avail. The React approach was useWindowSize(), set div width to 100% or the screen width in px, set div height to (image aspect ratio) times width, set `background-size: 100% 100%` or the exact div width/height px.
- hot_gril 2y ago
  Either ChatGPT has gotten better or I gave it a better prompt this time. It suggested this padding-bottom hack that sorta works but requires hardcoding aspect ratios, which I didn't want, but at least it demonstrates the layout we wanted with a Windows XP Bliss background image example: <style> .image-container { position: relative; width: 100%; height: 0; padding-bottom: 80.44%; /* h/w aspect ratio */ background-image: url('https://d7hftxdivxxvm.cloudfront.net/?quality=80&resize_to=width&src=https%3A%2F%2Fartsy-media-uploads.s3.amazonaws.com%2F2RNK1P0BYVrSCZEy_Sd1Ew%252F3417757448_4a6bdf36ce_o.jpg&width=910'); background-size: cover; background-position: center; } </style> <div class="image-container">hi</div> <div class="image-container">hi2</div> <div class="image-container">hi3</div> Though it seems laggier than the React version when I resize, and this doesn't get into making the text resize to fit the divs...
  - likeclockwork 2y ago
    I don't know what the intended treatment of the text is, but did you consider using an img element and stacking the text on top of it? What you have is basically just an image element with width: 100 height: auto, but it has children. Here's an example, written with tailwind for my convenience but should be pretty legible to anyone who knows CSS: <div class="grid place-items-center [&>*]:[grid-area:1/1]"> <img src="https://picsum.photos/500/400?grayscale&blur=2" class="w-full h-auto" /> <div>Hello.</div> </div> <div class="grid place-items-center [&>*]:[grid-area:1/1]"> <img src="https://picsum.photos/500/400?grayscale&blur=2" class="w-full h-auto" /> <div>Hello.</div> </div> <div class="grid place-items-center [&>*]:[grid-area:1/1]"> <img src="https://picsum.photos/500/400?grayscale&blur=2" class="w-full h-auto" /> <div>Hello.</div> </div> The height of the container is governed by the height of the image (until the text becomes taller than the image). You still have fully fleixible in terms placement (place-self) and/or sizing (height: 100%) of the text container.
    - hot_gril 2y ago
      Yeah, that worked, thanks! I didn't think to try that, probably because I don't typically go towards absolute positioning (I'm sorta n00b), but it makes sense now.
      - likeclockwork 2y ago
        Using grid like this isn't absolute positioning, we still have implicit sizing and regular document flow. We're just assigning the elements to the same grid area and letting that area be sized by its contents.

I'll make one when I get home. IIRC: You'd scroll down vertically on the site, through divs with different backgrounds. The initial HTML/CSS approach was nothing special, just adjacent divs with background-image with background-size options, and I tried other tricks to no avail. The React approach was useWindowSize(), set div width to 100% or the screen width in px, set div height to (image aspect ratio) times width, set `background-size: 100% 100%` or the exact div width/height px.

hot_gril 2y ago
Either ChatGPT has gotten better or I gave it a better prompt this time. It suggested this padding-bottom hack that sorta works but requires hardcoding aspect ratios, which I didn't want, but at least it demonstrates the layout we wanted with a Windows XP Bliss background image example: <style> .image-container { position: relative; width: 100%; height: 0; padding-bottom: 80.44%; /* h/w aspect ratio */ background-image: url('https://d7hftxdivxxvm.cloudfront.net/?quality=80&resize_to=width&src=https%3A%2F%2Fartsy-media-uploads.s3.amazonaws.com%2F2RNK1P0BYVrSCZEy_Sd1Ew%252F3417757448_4a6bdf36ce_o.jpg&width=910'); background-size: cover; background-position: center; } </style> <div class="image-container">hi</div> <div class="image-container">hi2</div> <div class="image-container">hi3</div> Though it seems laggier than the React version when I resize, and this doesn't get into making the text resize to fit the divs...
- likeclockwork 2y ago
  I don't know what the intended treatment of the text is, but did you consider using an img element and stacking the text on top of it? What you have is basically just an image element with width: 100 height: auto, but it has children. Here's an example, written with tailwind for my convenience but should be pretty legible to anyone who knows CSS: <div class="grid place-items-center [&>*]:[grid-area:1/1]"> <img src="https://picsum.photos/500/400?grayscale&blur=2" class="w-full h-auto" /> <div>Hello.</div> </div> <div class="grid place-items-center [&>*]:[grid-area:1/1]"> <img src="https://picsum.photos/500/400?grayscale&blur=2" class="w-full h-auto" /> <div>Hello.</div> </div> <div class="grid place-items-center [&>*]:[grid-area:1/1]"> <img src="https://picsum.photos/500/400?grayscale&blur=2" class="w-full h-auto" /> <div>Hello.</div> </div> The height of the container is governed by the height of the image (until the text becomes taller than the image). You still have fully fleixible in terms placement (place-self) and/or sizing (height: 100%) of the text container.
  - hot_gril 2y ago
    Yeah, that worked, thanks! I didn't think to try that, probably because I don't typically go towards absolute positioning (I'm sorta n00b), but it makes sense now.
    - likeclockwork 2y ago
      Using grid like this isn't absolute positioning, we still have implicit sizing and regular document flow. We're just assigning the elements to the same grid area and letting that area be sized by its contents.