1

I have been trying to make an image viewer component in Yew + tauri. I am using tailwindcss for my css. I have a column flexbox:

#[function_component]
pub fn ImageViewer() -> Html {

    html!(
        <div 
         class="flex gap-2 flex-col items-stretch">
                <div
                 class="p-2 flex-1 rounded bg-blue-400 bg-opacity-5 bg-blend-overlay
                        flex justify-center">
                    <img class="w-auto h-full object-scale-down" src="https://asat.gr/wp-content/uploads/2019/10/cropped-LOGO-12.2-1.png"/>
                </div>
                <p class="rounded text-blue-400 bg-blue-400 bg-opacity-5 bg-blend-overlay">
                    {"This is important information about the image"}
                </p>
        </div>
    )

}

The image is contained inside a div. The main tag is:

#[function_component]
pub fn App() -> Html {
    html! { 
        <main class="h-screen max-h-screen overflow-hidden p-2 flex gap-2 flex-col align-bottom justify-start bg-slate-900">
                <ImageViewer/>
        </main>
    }
}

I have tried all of the object-x options on the <img> tag and on the <div> tag. I have tried the h-full, w-auto, h-auto, w-full and the max- variants on both tags. I have also tried the aspect-square class, since my goal, to have a square image viewer that fits in the window with no overflow, no matter the aspect ratio of the window.

Right now a $> 1$ aspect ratio overflows horribly (with the image used) and a $< 1$ does what I want. For the $>1$ the square aspect ratio of the image can be retained by just centering in the middle. Seems like such a simple problem but no matter the tags I throw at it, it doesn't obey my will.

halfer
  • 19,824
  • 17
  • 99
  • 186
ShinyDemon
  • 33
  • 5
  • Hi, If I understood your requirements correctly, You can use the `overflow-clip` property with the parent of the image – Shakya Peiris Jan 31 '23 at 02:44
  • Hello, I would like to avoid overflowing in general. – ShinyDemon Jan 31 '23 at 03:42
  • 1
    I would suggest trying to work out the CSS you need on [tailwind play](https://play.tailwindcss.com) and then coming back to Yew. That way it will be easier to see if Yew is getting in the way or not. – jq170727 Jan 31 '23 at 08:44
  • @jq170727 thank you for the suggestion! I wanted to give all the context of my problem, that is why I included the frameworks I am using. The problem persists in tailwind play. I suspect the problem is h-full in the img tag. Using a fixed value for the max-h class works. I think it would be possible to implement if I had more control login by using sass or something, but there should be a way to do this with tailwind. I simply want the image to not cause the flexbox to overfill, and just fit to the div, which in turn grows to fill the available space. Why isn't object-fit isn't enough for this – ShinyDemon Jan 31 '23 at 19:36
  • @jq170727 for example class="max-h-screen object-contain" works, but of course overfills since there is another component underneath the image. "max-h-full object-contain" should do exactly what I want, but it doesn't! It's as if the content of the flex item is what defines the height of the parent, so h-full doesn't do anything. Is there a way to combat this? For example using a grid or something. As a more general question, how can I constrain the max height of a flexbox irrespective of its content? – ShinyDemon Jan 31 '23 at 19:44
  • 1
    I haven't done much with tailwind or flexbox layouts. I tried using them a year ago in an Elm app and gave up. I'm a CSS noob so I stick with [Bulma](https://bulma.io/) and do my custom layout with [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout). Also [cssgridgarden](https://cssgridgarden.com) is my friend. – jq170727 Jan 31 '23 at 19:59
  • 1
    Since your question is mainly about tailwind I edited your tags so that people familiar with it will see it. Also suggest adding the tailwind play link showing the problem to your question to make it easier for folks to take a quick look. – jq170727 Jan 31 '23 at 20:10

1 Answers1

1

After much fiddling and trying solutions to problems caused by the item of a flexbox overflowing its parent, I managed to get the desired result by adding the relative class to the div containing the img tag, and the absolute class to the img tag, as suggested in this answer. I showcase the result in this tailwind playground. The second answer doesn't work, as showcased in this playground (I hope I understood it correctly). Answer 1 doesn't work either. I think this works by making the div dimensions seem "locked" to the contained img, so it can't cause its parent to expand anymore.

Note: According to the author of the answer that helped me, since flexbox became widely supported, the first answer of that question is now the optimal one, but it doesn't work here for some reason. I never bothered learning about relative and absolute positioning because I just slap flexboxes everywhere, and it seems as if I shouldn't have to.

Sidenote: I'm just getting into the whole web thing and out of all the technologies involved, CSS is the one that trips me up most of the time. I guess you have to sit down and respect that it has its own intricacies and should be taken as seriously as all the other languages involved.

jq170727
  • 13,159
  • 3
  • 46
  • 56
ShinyDemon
  • 33
  • 5
  • 1
    Glad you found a solution! I took the liberty of adding **bold** to call attention to the link you posted that worked for you. – jq170727 Feb 01 '23 at 17:15