I am trying to change my standard <img/> to the NextJS <Image/> but I cannot find why my images are not rendered properly.
This is the basis tag
<div className=" mx-auto sm:w-9/12 lg:w-7/12 xl:w-8/12">
<img
className="object-fill rounded-md mx-auto sm:w-9/12 lg:w-full xl:w-8/12"
src={img}
alt="something"
/>
</div>
this works perfectly
While using the NextJS Image it does not work correclty
<div className=" mx-auto sm:w-9/12 lg:w-7/12 xl:w-8/12">
<Image
src={img}
layout="fill"
objectFit="contain"
alt="something"
className="rounded-md mx-auto w-full"
></Image>
</div>
All I can see it that the outer div of the <Image/> itself takes the width of the whole div (text + image) because the parent div of the <Image/> has apparently no width or height, while it has w-7/12.
You can try use a div as a container for style the Image component.
<div className=" mx-auto sm:w-9/12 lg:w-7/12 xl:w-8/12">
<div className="rounded-md mx-auto w-full">
<Image
src={img}
layout="fill"
objectFit="contain"
alt="something"
/>
</div>
</div>
Related
I am trying to create a visual for my project where the image is placed in a rotated container (div), however when the container is rotated the image inside gets rotated to the same number of degrees as the container.
Does anyone know how can I have the image straight and covering the container while the container is rotated?
<template>
<div class="p-4">
<div class="w-80 h-80 bg-blue-500 rotate-90">
<div class="w-80 h-80 bg-red-500 rotate-45">
<img
class="h-full w-full object-cover object-center"
src="https://www.aerointernational.de/content/uploads/2022/09/albums-global-8000-exterior-1_0-scaled-1150x600.jpg"
fit="fill"
alt="aircraft"
/>
</div>
</div>
</div>
</template>
Please see image codesandbox to for a clearer depiction of the issue.
https://codesandbox.io/s/hardcore-microservice-vix2uh?file=/pages/index.vue
I am using Nuxt / Tailwind CSS.
This one is using clip path: https://play.tailwindcss.com/vPFMKkR9WS
Otherwise, you can also do something like this: https://play.tailwindcss.com/Mume9LHfhm
<div class="m-20">
<section class="relative pt-20 pl-8">
<div class="absolute h-64 w-64 rotate-45 rounded-3xl bg-blue-500"></div>
<img class="absolute h-64 w-64 -rotate-[38deg] rounded-3xl object-cover object-center" src="http://i.imgur.com/kreZqnx.jpg" fit="fill" alt="aircraft" />
</section>
</div>
I have a very simple code with a grid and one image item within. The grid should be 70% of height of screen and I anticipated that the image is going to be contained within. For some reason, the image overflows.
The code:
<div className="grid grid-cols-2 w-full h-[70vh] items-center bg-[#19486A] border-2 border-red-400">
<img src={homeImage_desktop} alt='' className='ml-auto' />
</div>
Result:
I can resize the image manually to 70vh but I'd rather have the image resize itself to fit the parent automatically.
Add max-h-full max-w-full min-w-0 min-h-0
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-2 w-full h-[70vh] items-center bg-[#19486A] border-2 border-red-400">
<img class="max-h-full max-w-full min-w-0 min-h-0 ml-auto" src="https://images.unsplash.com/photo-1643131747793-1b103cc66c6b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1036&q=80" alt='' />
</div>
Set the image to 100% width of its parent element
<div className="grid grid-cols-2 w-full h-[70vh] items-center bg-[#19486A] border-2 border-red-400">
<img className="w-full" src={homeImage_desktop} alt='' className='ml-auto' />
</div>
I am trying to place my Image on the left side of the div.
Anything I try to do to move the Image or the div fail to work. Why is the Image stuck in the center?
I was able to achieve this using flexbox but had to switch to relative positioning because of the Nextjs Image component conflict. In the Image tag you'll see "layout='fill'" which was the root of my problem, but I am unable to rid myself of that piece of code
<div className="relative w-full bg-blue p-4 my-4 rounded-2xl lg:basis-5/12">
<Image className="float-left mr-4" src={"/"+icon} layout={"fill"} objectFit={"contain"} />
<div>
<h3>{ title }</h3>
<p>
{ paragraph }
</p>
</div>
</div>
What I am getting right now:
The float will not work with layout='fill'. Change it to either 'fixed' or 'intrinsic'. I recommend wrapping the Image tag into a div and making the div float. Try something like this.
<div className="bg-blue relative my-4 w-full rounded-2xl p-4 lg:basis-5/12">
<div className="float-left mr-4">
<Image src={'/' + icon} layout={'fixed'} height="120" width="120" />
</div>
<div>
<h3>{title}</h3>
<p>{paragraph}</p>
</div>
</div>
And to improvise it. You do not even need to use float. You can achieve same with flex. So if using float is not important you can do something like this
<div className="bg-blue my-4 flex w-full gap-4 rounded-2xl p-4 lg:basis-5/12">
<Image src={'/' + icon} layout={'intrinsic'} height="120" width="120" alt="" />
<div>
<h3>{title}</h3>
<p>{paragraph}</p>
</div>
</div>
Changing image on mouse hover :
I have a png image , with text engineerign and another picture with same text but different style.
I need on Hover to change between these 2 images.
I did that few times with normal <img TAG but in next js we need to use their <Image tag insted and this is not possible :
<Image src={engin} alt={'something'} onMouseOver={e => (e.currentTarget.src =
engin_fill)} />
Help is really appriciated
You can create 2 components inside some wrapper and just switch them on hover
<Wrapper onMouseOver={() => setHovered(true)}>
{!hovered&&<Image1/>}
{hovered&&<Image2/>}
</Wrapper>
You should use Tailwind CSS. After that, the code will look like:
<Image src={engin} class="z-20 hover:z-0" />
<div class="z-10">Text</div>
e.g.-
<div class="relative ">
<a class="absolute inset-0 z-10 bg-white text-center flex flex-col items-center justify-center opacity-0 hover:opacity-100 bg-opacity-90 duration-300">
<h1 class=tracking-wider >Title</h1>
<p class="mx-auto">Description</p>
</a>
<a href="#" class="relative">
<div class="h-48 flex flex-wrap content-center">
<img src="/image_url" class="mx-auto " alt="">
</div>
</a>
More answers:
Tailwind CSS: display text on image hover
How to install tailwind css: https://tailwindcss.com/docs/installation
I try to make a section that contains on a side some text and on the other side an Image that should be responsive (i.e. that becomes smaller when the window's size is also becoming smaller).
Using a simple <img src="/myimage.extension" alt="describe my image" /> does work perfectly. But as soon as I use the Next.JS Image component (in order to benefit from the optimization it does), it breaks the responsiveness.
Indeed, to make a kind of hero section with a responsive image I got this code (working perfectly fine):
<>
<div className={"h-screen py-0 py-20 text-center bg-blue-100 text-dark-blue"}>
<div
className={"flex flex-col items-center justify-center h-full md:flex-row app-container md:justify-between"}>
<div>
<h1 className={"text-red-400"}>With the Image component</h1>
<p>It doesn't resize on the size of the viewport</p>
</div>
<div className={"relative"}>
<svg
className={"absolute right-0 z-50 hidden w-1/2 sm:block"}
css={css`top: 25px;left: 25px;`}
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 674 674"
>
<circle id="Ellipse_8" cx="337" cy="337" r="337" fill="#e23b58"/>
</svg>
<img
src={"/image.jpg"}
alt={"Some image description"}
/>
</div>
</div>
</div>
</>
Then, replacing the img tag by an Image component breaks the responsiveness: the image never becomes smaller. It keeps its size.
<>
<div className={"h-screen py-0 py-20 text-center bg-green-100 text-dark-blue"}>
<div
className={"flex flex-col items-center justify-center h-full md:flex-row app-container md:justify-between"}>
<div>
<h1 className={"text-red-400"}>With the Image component</h1>
<p>It doesn't resize on the size of the viewport</p>
</div>
<div className={"relative"}>
<svg
className={"absolute right-0 z-50 hidden w-1/2 sm:block"}
css={css`top: 25px;left: 25px;`}
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 674 674"
>
<circle id="Ellipse_8" cx="337" cy="337" r="337" fill="#e23b58"/>
</svg>
<Image
src={"/image.jpg"}
alt={"Some image description"}
width={1103}
height={628}
/>
</div>
</div>
</div>
</>
You can see what's happening on this Sandbox. I'm looking for a way that enable me to control precisely how the Image component would be positioned.
The problem is not in the Image component. It's related to the styles applied to the div container.
If you remove items-center from the classes in lines 18-22 you will see that the image is resizing:
<div className={"flex flex-col items-center justify-center ...}>
Change to:
<div className={"flex flex-col justify-center ...}>