I am trying to display list images that have a fixed width and use the original height of the image that is 100%.
Similar question here with no answer.
I have read these answers here and tried them out. The images are there in the dom but out of the screen and does not show up.
The size of images varies eg. 1280x15141, 1280x14333.
This is what I am trying to do from the docs example.
<main className="mx-auto max-w-7xl ">
<section className="flex flex-col">
{chapter.images.map((img) => (
<div key={img} style={{ position: 'relative', width: '768px', height: '100%' }}>
<Image alt="Mountains" src={img} layout="fill" objectFit="contain" />
</div>
))}
</section>
</main>
This ends up displaying no image but they are present in the dom.
Update:
As per suggestion I have added height.
<section className="flex flex-col">
{chapter.images.map((img) => (
<div key={img} style={{ position: 'relative', width: '768px', height: '100px' }}>
<Image alt="Mountains" src={img} layout="fill" objectFit="contain" />
</div>
))}
</section>
Plain img tag approach.
But if i use the images in <img> instead.
I am able to see the image and apply width to it with the height as the default.
<section className="flex flex-col gap-2">
{chapter.images.map((img) => (
<div key={img} className="mx-auto md:w-4/5">
<img alt="Mountains" src={img} />
</div>
))}
</section>
But I want to use NextJs Image.
How can I do that?
I believe you're import path is incorrect
import mountains from '../../public/mountains.jpg'
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 days ago.
Improve this question
I have a container that is two sections left side and holds multiple divs that consist of a title and description and the right side of their pics but the container overflow is hidden and sticky.
I want to make it similar to the pics the right side container stays fixed or sticky with scrolling.
I know how to create the right side container and images appear at scrolling
but I cannot make it sticky and be in the center.
This is what I'm trying to achieve,
1st img
2nd img
<div className="flex flex-row w-full bg-red-900 ">
<div className="bg-red-300 w-full justify-center place-items-center">
<div className="h-screen justify-center flex flex-col space-y-3 bg-green-900 sticky top-0">
<span className="text-xl">Slemani Nwe Company</span>
<h1 className="font-semibold w-full text-5xl">
FMCG Distributer
</h1>
{/* map the tags and indexes seperate them with , */}
<div className="text-xl">Design, Development, Branding</div>
</div>
<div className="h-screen justify-center flex flex-col space-y-3 bg-green-900 sticky top-0">
<span className="text-xl">Slemani Nwe Company</span>
<h1 className="font-semibold w-full text-5xl">
FMCG Distributer
</h1>
{/* map the tags and indexes seperate them with , */}
<div className="text-xl">Design, Development, Branding</div>
</div>
<div className="h-screen justify-center flex flex-col space-y-3 bg-green-900 sticky top-0">
<span className="text-xl">Slemani Nwe Company</span>
<h1 className="font-semibold w-full text-5xl">
FMCG Distributer
</h1>
{/* map the tags and indexes seperate them with , */}
<div className="text-xl">Design, Development, Branding</div>
</div>
</div>
<div className="max-h-screen overflow-y-auto no-scrollbar bg-yellow-600 top-0 right-0 fixed" data-scroll-sticky>
<div className="imgs-container bg-pink-700 flex flex-col place-items-center ">
<Image
className="h-900 lg:w-10/12 xl:w-9/12 object-cover border-0 rounded-0"
src={"/projects/slemani-nwe.png"}
height={270}
width={350}
quality={100}
alt={"aa"}
priority
unoptimized
style={{
borderRadius: "0px !important",
overflow: "hidden",
}}
></Image>
<Image
className="h-900 lg:w-10/12 xl:w-9/12 object-cover border-0 rounded-0"
src={"/projects/slemani-nwe.png"}
height={270}
width={350}
quality={100}
alt={"aa"}
priority
unoptimized
style={{
borderRadius: "0px !important",
overflow: "hidden",
}}
></Image>
<Image
className="h-900 lg:w-10/12 xl:w-9/12 object-cover border-0 rounded-0"
src={"/projects/slemani-nwe.png"}
height={270}
width={350}
quality={100}
alt={"aa"}
priority
unoptimized
style={{
borderRadius: "0px !important",
overflow: "hidden",
}}
></Image>
</div>
</div>
</div>
I want to add my image to the top right corner but I am not able to add it. Pls help me in finding the error.
import Image from "next/image";
function Header() {
return (
{/* left */}
<div className='relative flex items-center h-10 cursor-pointer my-auto grid-cols-3 bg-black'>
{/* objectfit prevents from stretch of the image*/}
<Image
src='https://links.papareact.com/qd3'
layout="fill"
objectFit="contain"
objectPosition="left"
/>
</div>
{/* Middle */}
<div></div>
{/* Right */}
<div></div>
</header>
)
}
export default Header
Simply change the objectPostion: "right". Your image will be placed right
You have used flex so you can align to right by adding justify-end. Also you can make layout=responsive. And add className = "w-20 h-6" to either or a wrapping the image which gives the image proper size.
Here's the working code
<script src="https://cdn.tailwindcss.com"></script>
<div class='relative flex items-center justify-end h-10 cursor-pointer my-auto grid-cols-3 bg-black'>
<Image
src='https://links.papareact.com/qd3'
layout="responsive"
objectFit="contain"
objectPosition="right"
class="h-6 w-20 mr-2"
/>
</div>
<div></div>
<div></div>
I'm trying to create a sticky header with TailwindCSS but can't seem to make it work.
I've read the docs and seems that i only need to add sticky top-0 to my div to make it sticky, but it doesn't work.
I've tried to clean up my code as best as I could for the sake of readability, but if you are intrested in the entire code you can find it here.
import { Logo, ToolbarButton, IconLink, Countdown } from "#lib/atoms";
import { faWhatsapp, faFacebook } from "#fortawesome/free-brands-svg-icons";
import {
faHandHoldingHeart,
faHeadphonesAlt,
} from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
export const Toolbar = () => {
return (
<div className="flex flex-col drop-shadow-2xl">
<div className="h-16 flex items-center justify-center bg-rs-secondary">
<div className="container flex justify-between">
<div className="flex gap-4 items-center">
<IconLink
icon={faFacebook}
href="https://www.facebook.com/estereo.sulamita"
/>
<IconLink icon={faWhatsapp} href="https://wa.link/logvtp" />
</div>
<Countdown />
</div>
</div>
{/* I want this div to be sticky */}
<div className="sticky top-0 h-20 flex justify-center bg-white">
<div className="container flex items-center h-full justify-between">
<Logo />
<div className="flex">
<ToolbarButton>Inicio</ToolbarButton>
<ToolbarButton>Videos</ToolbarButton>
<ToolbarButton>Colaboradores</ToolbarButton>
<ToolbarButton
className="group"
hoverBackgroundColor="hover:bg-black"
primary={true}
>
<FontAwesomeIcon
icon={faHandHoldingHeart}
className="group-hover:text-white w-4"
/>
</ToolbarButton>
<ToolbarButton
backgroundColor="bg-rs-primary"
hoverBackgroundColor="hover:bg-black"
textColor="text-white"
primary={true}
>
Reproducir
<FontAwesomeIcon icon={faHeadphonesAlt} className="w-4 ml-3" />
</ToolbarButton>
</div>
</div>
</div>
</div>
);
};
The above code renders the following component:
Also, you can find a deployed version of my app here.
I'd like to achieve something like this with my header component.
Any help is much appreciated.
sticky element should be direct child of the scrollable element.
In your case scrollable element is the root __next container. Basically it means that you need to remove this div <div className="flex flex-col drop-shadow-2xl"> and replace it with React.Fragment so both of your headers, Countdown and second Header, would be direct children of this scrollable div.
I am using react-full-page in my project. But while adding the Footer in the routes, the footer on visible in the second section of the page and is not going at the bottom of the page.
CodeSandbox
I have included 2 routes, one "/"for home and the other "/about" for about.
Your Footer component is after your fullPage element (you can see in inspect), but your fullPage element has a static height and your footer is after that, if you want your footer being after all element, in this case, you must add your footer into fullPage,
Like this,
function Home() {
return (
<>
<FullPage>
<Slide>
<div style={{ height: "100vh" }}>
<h1>Hi</h1>
</div>
</Slide>
<Slide>
<div style={{ height: "100vh" }}>
<h1>Test Me</h1>
</div>
</Slide>
<Slide>
<div style={{ height: "100vh" }}>
<h1>I am Home</h1>
</div>
</Slide>
<Slide>
<div style={{ height: "100vh" }}>
<h1>I am Home</h1>
</div>
</Slide>
<Slide>
<Footer />
</Slide>
</FullPage>
</>
);
}
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>