Next Future Image Rounded?

Using 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>

10 Replies

ryanagillieOP•3y ago

even if I add not-prose to that outside div (which removes tailwindcss/typography) it still doesn't make it round Tried styling it directly with style={{ borderRadius: '9999px' }} to no avail

Unknown User•3y ago

Message Not Public

ryanagillieOP•3y ago

Nothin

ryanagillieOP•3y ago

ryanagillieOP•3y ago

using a regular <img> tag works, which makes me think it's the next/future/image fault ahhhhh it has to do with the object-contain trying to figure out a fix

Unknown User•3y ago

Message Not Public

ryanagillieOP•3y ago

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

ryanagillieOP•3y ago

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...

ryanagillieOP•3y ago

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

Unknown User•3y ago

Message Not Public

Gaming

Programming

Next Future Image Rounded?