Next Future Image Rounded?

Using

next/future/image

next/future/image

with tailwindcss and can't get an image to round

<div className="flex items-stretch justify-center">
  <div className="not-prose relative flex-1">
    <Image src={guild.icon!} alt="" className="rounded-full object-contain" fill />
  </div>
  <h1 className="flex-[2]">{guild.name}</h1>
</div>

<div className="flex items-stretch justify-center">
  <div className="not-prose relative flex-1">
    <Image src={guild.icon!} alt="" className="rounded-full object-contain" fill />
  </div>
  <h1 className="flex-[2]">{guild.name}</h1>
</div>

Ryan GillieOP•9/19/22, 2:57 PM

even if I add to that outside div (which removes tailwindcss/typography) it still doesn't make it round

Ryan GillieOP•9/19/22, 2:58 PM

Tried styling it directly with to no avail

Ryan GillieOP•9/19/22, 2:58 PM

Nothin

Ryan GillieOP•9/19/22, 2:59 PM

Ryan GillieOP•9/19/22, 3:01 PM

using a regular tag works, which makes me think it's the next/future/image fault

Ryan GillieOP•9/19/22, 3:04 PM

ahhhhh it has to do with the

Ryan GillieOP•9/19/22, 3:08 PM

trying to figure out a fix

Ryan GillieOP•9/19/22, 3:38 PM

Does not work either, found out it's actually impossible. You have to use instead of , but next doesn't allow you to override

Ryan GillieOP•9/19/22, 3:39 PM

https://stackoverflow.com/questions/68502752/how-can-i-use-object-fit-contain-in-css-and-still-have-a-border-radius-on-the

Stack Overflow

How can I use "object-fit: contain" in CSS and still have a border ...

I'm trying to show an image in a "lightbox" style so that it will fill the available area on screen, in this case 90% of the width of the page and 70% of the height.
Using object-fit: con...

Ryan GillieOP•9/19/22, 3:42 PM

It may be possible with another layout, but the one I have currently doesn't work. Trying to get