search

xiphux / svimg

Svelte image component with image preprocessing and lazy loading
ISC License
243 stars 15 forks source link

Height Sizing #54

Open MrVauxs opened 1 day ago

MrVauxs commented 1 day ago

Hi, I am trying to use the svelte Image component to for a banner logo. The banner has limited height of 9vh and everytime I attempt to use the component, it just overflows instead of scaling to match the height. This is also built in Tailwind, bear in mind.

    <div class='mx-auto'>
        <img src='img/Loot_Taverns_Vault.png' alt="Loot Tavern's Vault" class='mx-auto h-[8vh] pb-1' />
        <Image src='img/Loot_Taverns_Vault.png' alt="Loot Tavern's Vault" immediate={true} class='mx-auto h-[8vh] pb-1' />
    </div>

chrome_SUw5sfSRuU chrome_ExnF5GWgME

Is there a way to make the component scale properly? No matter what I do it feels like the underlying CSS just refuses to scale.

MrVauxs commented 1 day ago

After some digging, it looks like there are two issues at play:

  1. The wrapper uses display: grid causing it to overflow
  2. There is no built-in way to change the wrapper on the underlying img element from being width: 100%; height: auto to width: auto; height: 100%.