I'm leveraging next/image to display my image in the following way:
<Image
src={imageLink}
width="1920"
height="512"
alt="Hero Image"
/>
Everything works well for screen widths larger than 750px.
Is there a way to adjust the height to "612" when the user accesses the site on a mobile or tablet (screen width below 750px)?
Embed an Image in a div and apply the specified properties to the Image:
<div className="custom-div">
<Image src={imageUrl} layout="fill" objectFit="cover" />
</div>
Ensure that the div has a position: relative. This allows flexibility in adjusting the height/width using media queries.
2023 has arrived, and NextJS 13 brought about significant changes to the Image-API. Embracing the new app directory structure and naming conventions of NextJS 13, here is my approach to achieving the desired functionality:
// page.jsx
import styles from './page.module.css';
import logo from '../public/logo.png';
export default function Home() {
return (
<div className={styles.logoContainer}>
<Image src={logo} alt='Argo Logo' fill />
</div>
);
}
/* page.module.css */
.logoContainer {
position: relative;
overflow: hidden;
width: 158.57px;
height: 30.93px;
}
@media (max-width: 500px) and (orientation: portrait) {
.logoContainer {
width: 79.285px;
height: 15.465px;
}
}
Embed your image within a div element and easily adjust the height and width:
<div className='relative h-96 md:h-3/4'>
<Image className='h-full sm:h-64'
src="/static/images/desktop/image-header.jpg" alt="sun"
layout='fill' objectFit='cover' width={400} height={350} />
</div>
If you're working with the latest version of Next.js, you now have the ability to implement responsive sizing for images. Here's an example:
<Image
fill
src="/example.png"
sizes="(max-width: 768px) 100vw, 1920px"
/>
Keep in mind that the sizes attribute will adjust the width of the image. To modify the height of the image, consider wrapping it within a div and using CSS to control the height of the parent container.
For more information, refer to the documentation: https://nextjs.org/docs/pages/api-reference/components/image#sizes
To customize the styling of your website, you can create a custom CSS class in your stylesheet file.
Within this class, define the properties you need such as height, padding, margins, etc.
@media (min-width: 576px) {
.custom_class {
max-width: 540px;
}
}
@media (min-width: 768px) {
.custom_class {
max-width: 720px;
}
}
@media (min-width: 992px) {
.custom_class {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.custom_class {
max-width: 1140px;
}
}
To create a responsive design, use the Grid tag as a parent element when incorporating an Image tag. See the example below:
<Grid width={30}>
<Image
onClick={() => setIsDrawerOpen(true)}
layout="responsive"
src={menuIcon}
component="img"
alt="WhatsApp logo">
</Image>
</Grid>
I have successfully created an arrow box (div) using custom CSS and HTML. However, I am facing difficulty in implementing the same design in Material UI with React JS. The code below demonstrates how to achieve this using custom CSS. My question is: How ...
I have set up environment variables in my application using a .env.local file and trying to access them through process.env.ENV_KEY within a component. However, I am facing an issue where it is not returning the actual value but instead showing undefined. ...
I've implemented a table using Antd in Reactjs, with 50 rows per page and pagination allowing for up to 6 pages. However, I encountered an issue with the index column displaying numbers only from 1 to 50 on each page, rather than continuing sequential ...
My form page is built in react and typescript, utilizing JWT tokens on the API side. While there are no issues with the container page, I encountered an error on the index.tsx page where the routers are defined: A TypeScript error occurred in C:/Users/yusu ...
I'm working on displaying a table using React, and the code seems to be functioning properly. function RankingTableBody(props) { let tableBody; if (props.source === 'visitor') { tableBody = TableRowMap(props, props.data.vv_h ...
I've set up an unordered list with bullet points created using FontAwesome, along with a background and border radius for added style. My issue is that I want the second line of text to align below the first one rather than under the bullet point. ...
I am attempting to develop an app container that mimics the functionality of Microsoft Excel. The container should scroll both horizontally and vertically, with fixed headers on the left and top that move along with the content. Here is a rough representat ...
I found a cool SVG pie chart on this codepen that I want to modify. The original chart is 50 x 50 and animated, but I want to make it 20 x 20. To resize the pie chart, I tried changing the width, height, radius, and center points in the code. I also adjus ...
How can I filter the Material table by date values greater than the current value? I've been able to filter by exact date so far, but I need to filter all values that are greater than or equal to the current value in the table. <TableMaterial ...
In my Vue.js project, I have a topbar with two divs whose size and content need to be adjusted based on whether the user is logged in. If they are not logged in, it should look like this: <div id='search' width="400px"></div><div ...
Revised This question is distinct from the duplicate one. I am specifically addressing the issue of ensuring the underline continues until the end of the text, regardless of how many lines it spans. The challenge I am facing is with displaying the underl ...
As the deadline for my project approaches, I find myself struggling with mastering React.js for personal use. Despite dedicating almost 2 weeks to learning it, I still feel uncomfortable using it compared to MongoDB, Express, and Node. React has proven t ...
Struggling with this issue has me on the verge of pulling my hair out. It seems like a simple task, yet I can't seem to achieve perfection. My goal is to create a row of squares that maintain their aspect ratio but scale down in size as their containe ...
I am working on a project where I need to create a grid of 16 audio files with separate links for each in HTML, CSS and JavaScript. Each box in the grid should link to a different audio file. My initial thought was to use a table to achieve this, so I cre ...
I have attempted to include the following code in my main.scss file: @import '~ag-grid-community/src/styles/ag-grid'; @import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham'; @import '~ag-grid-community/src/st ...
Looking for help with my expandable list menu that I created using jQuery. Here is the code snippet: $("#menu ul li ul").hide(); $("#menu ul li").click(function() { $(this).find("ul").slideToggle(); }); You can view the fully functional menu on jsFi ...
I am looking to set specific positions and dimensions for the div elements within my HTML document. Refer to this image for reference: https://i.stack.imgur.com/ANBVm.png For each of these div elements, I want a vertical scrollbar to appear if the content ...
Experiencing a flickering issue with the fixed menubar and easyResponsiveTabs.js in my project when scrolling down. Attempted to resolve it using jquery.noConflict(), but without success. Would appreciate any guidance on how to address this problem. ...
My webpage consists of three elements: a search bar, a search result area, and a form. The use case scenario involves showing the search bar and form div by default, while hiding the search result div. When I enter keywords into the search bar, client data ...
Every time I reopen the project, the file tailwind properties do not get rebuilt and if I add new properties like text-color, they are also not reflected. Any suggestions on how to solve this issue? I need the project to update and take in new properties ...