I am using Image Nextjs Component to put my image in the center of the page i want the picture to be like this and remain its reel size but it has been pixelized. plusm when i reduce the the screen width the picture doesn't appear correctly for the small screen views a part of the picture disappears
<div
style={{
position: 'relative',
width: '1000px',
height: '500px',
alignItems: 'center',
}}
>
<Image src='/services.png' alt='' layout='fill' objectFitt='fill' />
</div>
I think the problem is from the div style. I tried so hard to fix the width and height of the div but i still get the deformed picture in the page. Also i changed the objectFitt to 'cover' but same problem :(
I appreciate any help and any explanation of how to put an image without being pixelized.
Thank you so much.
The picture size is: width=1454px and height=455px
here is the picture
You should change the div's width from 1000px to 100% to make it responsive and choose height according to different screen sizes. try out this-
<div
style={{
position: 'relative',
width: '100%',
height: '300px',
alignItems: 'center',
}}
>
<Image src={main_image} alt='' layout='fill' objectFitt='fill' />
</div>
Related
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 have a quite complex layout. If simplified it's a flexbox with two child flexbox items. Parent flexbox takes full height of a screen and child flexboxes takes full height as well.
How can I make a one child flexbox take full screen height and if its bigger than a user screen then scrollY should appear for that child? I'm trying to find a solution without calc function ...how can I make it another way (might be it is possible with height: 100%)?
The amount of content in child can be different so I need overflowY only if content exceeds screen size. In the code example below I need blue container take full height and scrollY because there's lot of content.
Here's codesandbox: https://codesandbox.io/s/modest-leakey-bk75j8?file=/src/App.js
export default function App() {
return (
<div
style={{
display: "flex",
gap: "20px",
background: "pink",
minHeight: "100vh"
}}
>
<div
style={{
flex: 1,
background: "green"
}}
>
Container 1
</div>
<div
style={{
flex: 1,
background: "lightblue",
height: "500px",
overflow: "auto"
}}
>
<p>{TEXT}</p>
<p>{TEXT}</p>
<p>{TEXT}</p>
</div>
</div>
);
}
I believe you just need to change one line in light blue box's style to achieve what you have described. Just change the maxHeight to maxHeight: "100vh".
Then it becomes:
<div
style={{
flex: 1,
background: "lightblue",
maxHeight: "100vh",
overflow: "auto"
}}
>
You can just remove the height attribute from your blue box. You can also remove overflow and still have the described effect.
Here's a sandbox exemple: https://codesandbox.io/s/elegant-jang-3k0pq4?file=/src/App.js
I have this bootstrap table in react -
<Table
striped
bordered
hover
variant="dark"
className="table"
style={{ maxHeight: "90vh", overflow: "scroll" }}
>
However, the maxHeight and overflow properties don't seem to work. Even if I use the height prop, the table height is still the same.
One more method, I tried is added a className to the table and then trying it with CSS, even that did not work.
So is there a way I can add height and overflow to a bootstrap table?
I found how you can do that.
By wrapping the table by a div which has those properties
So, in this case -
<div style={{ height: '90vh', overflow: 'scroll' }}>
<Table
striped
bordered
hover
variant="dark"
className="table"
style={{ maxHeight: "90vh", overflow: "scroll" }}
/>
</div>
I have a 3rd party component which is using display:flex. It behaves correctly in terms of it's top position, but I want the bottom of the component fixed to the bottom of the browser window.
https://codesandbox.io/s/18ox21zqm4
const App = () => (
<div>
<Menu fixed="top" inverted>
<Container>
<Menu.Item as="a" header>
Navbar
</Menu.Item>
<Menu.Item as="a">Home</Menu.Item>
</Container>
</Menu>
<div style={{ position: "fixed", top: "100px" }}>
<Header as="h1">Dynamic Height Content</Header>
<TextArea placeholder="This container height may grow or shrink based on content." />
<Segment style={{ backgroundColor: "red" }}>
<Grid>
This 3rd party component which uses display:flex should have top just
below above component, bottom fixed to browser window bottom (scales
with window resize).
</Grid>
</Segment>
</div>
</div>
);
render(<App />, document.getElementById("root"));
I have tried putting the component in a div with it's top and bottom fixed, using a ref of this div to get the height and derive what the height of the flex component should be, but the height from the ref does not update with window resize, only on browser reload.
How can I go about achieving my goal?
We can do something like this but this is usually not a good coding practice (don't have enough reputation yet to comment)
<Segment style={{ backgroundColor: "red", height: "100vh" }}>
The actual HTML output is:
<div style="position: fixed; top: 100px; bottom: 0px;">
...
<div class="ui segment" style="background-color: red;">
<div class="ui grid" style="height: 100%;">This 3rd party component which uses display:flex should have top just below above component, bottom fixed to browser window bottom (scales with window resize).</div>
</div>
</div>
Since your <div class="ui segment"> has no height, giving <div class="ui grid"> a height of 100% isn't doing anything, since it's just 100% of the parent. You need to add your height: 100% to the <div class="ui segment"> aka <Segment />, so that it can fill the space set by the hight of the wrapping div.
<div style={{ position: "fixed", top: "100px", bottom: "0px" }}>
<Header as="h1">Dynamic Height Content</Header>
<TextArea placeholder="This container height may grow or shrink based on content." />
<Segment style={{ backgroundColor: "red", height: "100%" }}>
<Grid>
This 3rd party component which uses display:flex should have top just
below above component, bottom fixed to browser window bottom (scales
with window resize).
</Grid>
</Segment>
</div>
the header image i have obviously wont fit to all browser width so i used following css to take auto adjust it to the browser width. however, if i dont specify the height attribute the div does not appear. specifying height as auto or % does not work either. only way it works is giving a fix px. but then that will make the whole design non responsive on small devices as the height will stay constant. please advise
<div fxLayout="column">
<app-nav-bar></app-nav-bar>
<div fxLayout="row" fxLayoutAlign="start stretch" style="background: url('../../assets/images/header1.png') no-repeat;background-size: 100%;height:300px">
</div>
</div>
Try using "background-size:cover" instead of 100%.
For those using React: the material-ui-image will automatically make the image full screen like so:
<Image style={{marginLeft: '-24px', marginRight: '-24px', marginBottom: '24px', marginTop: '-24px'}}
src={'https://images.unsplash.com/photo-1579037611768-298fcaad76e2?auto=format&fit=crop&w=1000&h=625&q=60'}
onClick={() => console.log('onClick')}
aspectRatio={(16 / 9)}
disableSpinner
/>