score:-1
if someone use nextjs with styled components. it works:
const container = styled.div`
width: 100%;
div, span {
position: unset !important;
}
.image {
object-fit: contain;
width: 100% !important;
position: relative !important;
height: unset !important;
}
`;
<container>
<image src={ src }
layout="fill"
classname={ "image" }
/>
</container>
score:0
in case you dont want to use absolute values for height and width , that is in px etc , you can do something like this
<div style={{ position: "relative", width: "100%", paddingbottom: "20%" }} >
<image
alt="image alt"
src="/image.jpg"
layout="fill"
objectfit="contain" // scale your image down to fit into the container
/>
</div>
original source https://stackoverflow.com/a/66358533/12242764
score:6
i think also provide object-fit attribute on the image element like this:-
<image
alt="mountains"
src="/mountains.jpg"
layout="fill"
objectfit="cover"
/>
example provided by nextjs can be https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-fill.js
score:9
here is a way: for example i want to have an image that covers the whole width & height of its container which is a div.
<div classname={'image-container'}>
<image src={path} layout="fill" classname={'image'} />
</div>
and here is the style: (there is a container div that occupies half width & height of viewport & my image will cover it.)
// nested styling
.image-container {
width: 50vw;
height: 50vh;
position: relative;
.image {
width: 100%;
height: 100%;
position: relative !important;
object-fit: cover; // optional
}
}
// or normal styling
.image-container {
width: 50vw;
height: 50vh;
position: relative;
}
.image-container .image {
width: 100%;
height: 100%;
position: relative !important;
object-fit: cover; // optional
}
score:24
<img src="/path/to/image.jpg" alt="" title="" />
in nextjs
<image src="/path/to/image.jpg" alt="" title="" width="100%" height="100%" layout="responsive" objectfit="contain"/>
score:76
this is what worked for me:
<div style={{width: '100%', height: '100%', position: 'relative'}}>
<image
alt='mountains'
src='/mountains.jpg'
layout='fill'
objectfit='contain'
/>
</div>
Source: stackoverflow.com
Related Query
- How to set the next/image component to 100% height
- With Semantic UI React, how to set the width and height for Image Avatar?
- How do I set both height and width of image so that it can fit the size of my canvas in fabric.js?
- How to set image width to be 100% and height to be auto in react native?
- How to set the height of button in React Native Android
- How to set the width of a React component during test?
- How should customRequest be set in the Ant Design Upload component to work with an XMLHttpRequest?
- How to mirror and resize the part of image with fixed width and height
- How to TEST async calls made in componentDidMount that set the state of React Component
- How do you get the height of a stateless functional component that's a child?
- Using material-ui's APIs, how do I set a background image in the body?
- How do I set a width for the TextAreaAutoSize component in Material-UI?
- how to set the image position with JSX/HTML5?
- How to focus the next field of input, in react-native component
- How to set state from props that is passed to the component in react?
- How can I set the source of an image dynamically in React native?
- How to set the zIndex on the drawer component
- How can I set the dynamic height of react-data-grid
- How can I cancel the next 'then' in a Promise when a React component is unmounted/reused?
- How to dynamically set height of a component whose height is an animated value post-animation?
- How to set the background color of material ui drawer component with styled-components?
- React: How to set width and height of an element in react component programatically
- How to set the height of a Material-UI's Grid item equals to its width responsively?
- How to set excelsheet row height to auto so that the content can autofit in the cell using exceljs
- Material-UI How to set minWidth and maxWidth of MenuItem (popover) according to the width of the select component
- How to add types to the own props of the component next to those of the theme?
- How to read an image from the localhost url and get its width and height in javascript
- How to set the 4 corners X, Y coordinates value of a FabricJS image
- How do I set an event listener on the parent component in ReactJS?
- react-bootstrap-table: How to programmatically set the height of a BootstrapTable element?
More Query from same tag
- React/Redux Wrong This Context
- nextjs RangeError: Maximum call stack size exceeded
- How do I update a JSON and then output it again?
- React Simple Unit Test for Reducer
- How to add multiple proxies in React's package.json?
- Unable to Inject 3rd Party Scripts in Gatsby
- Why am I getting: TypeError: _axios.default.get.mockResolvedValue is not a function
- How to update status of Parent sate using functional component react
- Calling .then on a dispatch in axios/react
- stylesheet for css not being implemented for next.js components
- Dynamically generate radio group from json
- Failed to load resource: the server responded with a status of 500. Deployed react app with vercel
- How to get data from mongodb on client side?
- Uncaught TypeError: _firebase__WEBPACK_IMPORTED_MODULE_0__.app.auth is not a function
- react hook forms - disappearing default values
- Slick slider in react arrow icon get hiding
- React useState not rendering with objects
- React pending promise while after fetching from express backend
- How to access cookie in server-side data fetch for isomorphic React app
- Function call and pass value in the same OnClick - React
- How to make clicking an anchor equivalent to clicking a details tag?
- using axios with promise API
- React onClick without JSX
- react check array values based on specific keys returning true/false if values found
- Android Talkback not registering onFocus for web. How do I manipulate accessibility focus with Android Talkback?
- In what way can each <li> in a <ul> change its classname without affecting the others?
- Cannot load table in React.js
- React/Redux: how to hold login fail
- How can I delete an item from my todo list in typescript
- React Context and Typescript