I'm trying to use the Next.js' <Image> component with the layout=fill option. Therefore I've created a relative div that contains the Image tag. But I'd like to determine the height by the Image height.
Found this example but height is statically given there. So I've tried this based on the example.
<div className="relative w-full h-full">
<Image
src={post.coverImage.url}
layout="fill"
alt={post.title}
/>
</div>
I've also tried h-full or max-h-full classes instead of h- tags but couldn't succeed.
How can I make its height automatically determined?
I had the same issue and figured it out after inspecting the element. The problem is how Image component takes place in DOM.
This the Image component on DOM, look there are 2 divs and inside "img" is placed. So you have to target the outer div that wraps img.
// I add img-wrapper class
<div className="relative w-full h-full img-wrapper">
<Image
src={post.coverImage.url}
layout="responsive"
alt={post.title}
/>
</div>
and in css:
// targeting the first div
.img-wrapper > div {
// this will take full-height, u can adjust it
height: 100%;
}
Related
<>
<div
className={
"border-2 border-amber-400 flex-shrink-0 w-[200px] h-[300px]"
}
>
<img
src={img}
alt="Background Image"
className="object-cover h-250 w-200"
/>
Pictureeeee
</div>
</>
I want the container always be constants to h-250 and w-200 for the layout.
Even if I set it to h-250 and w-200, it does not seem to work that way. I want the image to fill or stretch to cover all the spots if necessary. Also, that ? box to be h-250 and w-200 as well.
You have missed a very small detail while using arbitary values, As there is no class named h-250 and w-200 you are not able to see the desired height and width
Change
className="object-cover h-250 w-200"
to
className="object-cover h-[250px] w-[200px]"
I am new to NextJS and was using its Image tag to have an image in my application. But the image size only changes if I change its width value, changing height's value does not impact it at all.
Here is the image:
<Image src="/Logo.png" alt="Logo" height={10} width={100} />
Here the image is taking the width's value and coming out to be big. If I replace the values in height and width, then also it takes the width's value and becomes small. I have even tried to put height property after width but nothing changes.
What am I doing wrong here?
You can wrap the Image component inside a div and style it like this:
<div style={{ position: "relative", width: `${100}px`, height: `${10}px` }}>
<Image
src="/Logo.png"
alt="Logo"
fill
style={{ objectFit: "contain" }}
/>
</div>
Note that:
The wrapper div has a relative position since fill Images are absolute positioned inside the DOM
fill is a prop in next 13 (older versions use layout="fill")
objectFit is passed inside the style object (with optional objectPosition) and those properties will be added to the rendered span element style properties
Wrap tag in a with the height and width you want your image to be
Add layout="fill" in the tag
<div style={{width: '100px', height: '100px'}}>
<Image
src="/Logo.png"
alt="Logo"
layout='fill'
objectFit='contain'
/>
</div>
I nested a bunch of mapped img elements within a div and set the div's overflow-x to scroll.
<div className='w-full px-2 flex gap-2 overflow-x-scroll scrollbar-none'>
{props?.categoryMovies?.map((movie, i)=> (
<img
id={movie?.id}
key={i}
className='w-[60] h-[60] object-contain'
src={props?.preImg + movie?.poster_path}
/>
))}
</div>
As expected, when I run this code, any img element that flows outside the barrier of the parent div's width is only visible when I scroll along the x-axis.
However, when I try to nest those img elements inside of another div, the behavior changes.
<div className='w-full px-2 flex gap-2 overflow-x-scroll scrollbar-none'>
{props?.categoryMovies?.map((movie, i)=> (
<div className='w-60 h-60'>
<img
id={movie?.id}
key={i}
className='w-full h-full object-contain'
src={props?.preImg + movie?.poster_path} />
</div>
))}
</div>
Instead of maintaining the same results, content that flows out of the main parent div element is visible by default. So, you can say it's as if it breaks out of the barrier of the parent div element and is visible when I scroll on any part of the body of the page, not just when I scroll on the parent container div.
How can I get the second code block to behave like my initial example and have the content become visible only when I scroll on the parent div container?
One way to fix this would be to give each <div> in your flexbox the utility class flex-shrink-0, which will preserve the size of each container.
<div className="w-full px-2 flex gap-2 overflow-x-scroll scrollbar-none">
{props?.categoryMovies?.map((movie, i)=> (
<div className="w-60 h-60 flex-shrink-0">
<img id="{movie?.id}" key="{i}" className="w-full h-full object-contain" src={props?.preImg + movie?.poster_path} />
</div>
))}
</div>
You can see it working here: https://play.tailwindcss.com/KoEroV1coQ
I'm embedding React Draft Wysiwyg component within a flexbox. The flexbox should consist of this component alongside a circle div.
For some reason, the circle div gets squished and is not circular, but instead is narrower than it should be.
I can reduce this 'squishiness' by passing the wrapperClassName prop and adding w-fit (which is the Tailwind equivalent of width: fit-content; in pure CSS), however, the circle is still squished on narrower screens.
Image:
Code:
<div className='flex gap-x-2 items-center w-full min-w-[480px] h-full py-3 px-2 bg-gray-50 rounded'>
{/* Rich text editor component */}
<Editor
wrapperClassName='w-fit'
/>
{/* Circle */}
<div className={'group w-9 h-9 rounded-full'} />
</div>
How can I get the Editor component to take all remaining width without taking away the space that the circle div needs to remain a proportional circle?
You could give the Editor w-full and give the circle a p-5 instead of w-9
Is this what you meant: https://play.tailwindcss.com/cPxzlro2re
In my app (using bootstrap 5.1 with react-bootstrap v2) I have a parent div to which I applied the style max-height:100vh; and d-flex flex-column classes. This parent div has 2 children:
A div containing a navbar;
A div with class container-fluid and flex-grow-1
Now if I apply the style overflow:'auto'; at the container div it will become scrollable.
My goal is to be able to build components that can expand their height automatically without causing parent div to overflow and scroll themselves instead.
In the previous scenario I added max-height:100vh; and got a fixed parent height but I can't use this workaround in order to create such desired components.
I already tried setting height to 100% but it caused the parent element to overflow.
I made a simple codesandbox example with what I tried so far. Consider as target to get column 1 scrollable without scrolling other divs
If I understand what you are trying to accomplish, you would like the Container element to stay at a static height based on viewport height and have components or divs that scroll within that constraint? If so I think this should work:
import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
import { Container } from "react-bootstrap";
import Navigator from "./Navigator";
import Content from "./Content";
export default function App() {
return (
<div className="d-flex flex-column w-100" >
<div>
<Navigator />
</div>
<div>
<Container fluid>
<div className="d-flex" style={{ height: "85vh" }}>
<div className="px-2" style={{ overflow: "auto" }}>
<h5>column 1</h5>
<Content number={15} style={{ width: 200 }}>
<p>.....................</p>
</Content>
</div>
<div>
<h5>column 2</h5>
<Content numeber={3} style={{ width: 200 }}>
<p>-----------</p>
</Content>
</div>
</div>
</Container>
</div>
<div>
<Navigator />
</div>
</div>
);
}
I used 85vh for the "d-flex" div height as an example as I don't know what height you have provided for the Navigator elements. The result is a static container height with column 1 scrolling instead of expanding the height of the containing div. If you don't have a set height for the navigator elements but still want the viewport to display all elements without scrolling you will need to use useEffect to query the height of those elements, post paint, and do a calculation based on viewport height to output the correct height for the container element.