The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Force image to shrink based on viewport height (and content)

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #276351


    I’m trying to build a now-playing page for a web-app, and I’m having trouble getting it to fit on all devices.

    Because of the different widths and heights, I would like the album art image to be dynamic, but generally take up as much space is available without pushing the song-details (Title, Artist) off the page.

    So, the song-details will always be in view at the bottom of the page, because the album art will shrink to accommodate them should the height of the page not allow the square image to take up its desired width.

    I’ve been testing around with a few solutions, but the only one I’ve come up with is to set a max-width on the artwork container that uses vh units. But this is essentially a guess at the proportions of the other elements on the page. Does anyone know of a creative solution for this?

    I left the pen mostly blank but with the general structure found in my application. What would be best would be if the image tried to take up full with, but shrunk as you shrink the height of the viewport based on the size of the other content (in this case just the .song-details)


    Except viewport units, what else did you try? Have you tried flexbox?

    … set flexbox on parent and child elements:


    Interesting no I hadn’t thought about using flex box in this situation. When setting the object-fit to contain, that gets much closer to what I’m going for. Thank you for the feedback!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.