Optimizing image centering in Next JS as screen size expands

I've been struggling to work with NextJS's Image component. My goal is to set up a banner image that only covers a specific amount of space on the screen, regardless of screen size. I have managed to achieve this by using max-height: 30vh and overflow: hidden. However, I'm facing an issue with centering the image as the screen size changes. The focus should shift from viewing the entire image to focusing on the bed, but instead, it seems to be centered on the ceiling of the picture.

Check out a live sample: https://codesandbox.io/s/nextjs-image-layout-lc7vb?file=/src/pages/index.tsx

const Index = (props: IBlogGalleryProps) => (
  <Main
    ...
  >
    <div className="w-full overflow-hidden" style={{ maxHeight: '30vh' }}>
      <Image width="300" height="200" layout="responsive" src="https://images.unsplash.com/photo-1519494080410-f9aa76cb4283?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />
    </div>
    ...
  </Main>
);
javascripthtmlcssnext.jsnextjs-image

Answer №1

To align the image based on your preferences, utilize layout="fill" along with objectFit="cover".

Explore next/image API Reference

With the fill option, the image will expand in both width and height to match the parent element's dimensions, commonly paired with object-fit.

In order for this to take effect, the container must have a defined height and position: relative.

If you wish to customize the object position instead of using CSS's default object-position: 50% 50%, you can also set objectPosition.

Here is an example of how it can be implemented:

const Index = (props: IBlogGalleryProps) => (
  <Main
    ...
  >
    <div className="w-full overflow-hidden relative" style={{ height: '30vh' }}>
        <Image layout="fill" objectFit="cover" src="https://images.unsplash.com/photo-1519494080410-f9aa76cb4283?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />
    </div>
    ...
  </Main>
);

Check out a live demonstration here: https://codesandbox.io/s/nextjs-image-layout-forked-82op5?file=/src/pages/index.tsx

Answer №2

@El Devoper's solution is spot on, however, starting from version 13 onwards, the objectFit and layout props have been eliminated. Instead, you should utilize the style prop.

For Version 13 and Beyond 

<Image fill style={{ objectFit: "cover" }} />

Answer №3

<div
     style="
            height: 30vh;
            width: 100%;
            max-width: 800px;
            position: relative;
            background-image: url('/imagelink/image.jpg');
            background-position: center center;
            background-size: cover;
            ">

</div>

If you want to add a background to a div, you can use the code above. The positioning of the background image can be adjusted using the background-position property.

Alternatively, for an <img/> tag, you can utilize object-fit and object-position like so:

object-fit: cover;
object-position: center;

This will ensure that your image fills the entire space of the <img/> element while staying centered within it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain user input and showcase it on the screen using a combination of Ajax and PHP

Whenever a user inputs a value in the textbox, it should dynamically display on the screen. I have successfully implemented this feature once, but I am encountering difficulties with implementing it for a second input. Your help is greatly appreciated. fu ...

javascriptjqueryhtmlajaxcodeigniter

Is it possible to create an HTML interface with Google Workspace Add-ons?

Recently, I've been on a mission to create a Google Workspace Add On that can display an iFrame. My journey led me to explore the documentation for Google Apps Script and Google Add Ons. From what I've gathered so far, it seems that I'll ne ...

htmlgoogle-apps-scriptgoogle-workspace-add-ons

Executing script once the DOM has completed loading

In my project, I'm dynamically generating menu items for a menu bar based on headers from external files that are imported using an XMLHttpRequest(). The menu bar is then updated as I navigate through different pages. Everything works smoothly. Each ...

javascripthtml

import component dynamically from object in Next.js

Currently, I have a collection of components that I am aiming to dynamically import using next/dynamic. I'm curious if this is achievable. Here's the object in interest: // IconComponents.tsx import { Tick, Star } from 'components ...

javascriptreactjstypescriptnext.js

The issue with nextjs and vscode is that all the files are named index.js

With the current setup where all page files are named index.js, the file tabs section is cluttered with multiple index.js files. It becomes difficult to identify which file belongs to each specific page without opening and viewing the tab. This approach i ...

reactjsvisual-studio-codenext.js

Please disregard clicking on see-through areas of images

Currently working on a game project that involves layering multiple images (tiles) on top of each other to create a sense of depth. However, I have encountered an issue when attempting to click on these overlapping tiles. Due to their transparency, click ...

htmlcssreactjsclicktile

Introduction to utilizing the features of HTML5 tag attributes and HTML5+CSS form validation within Struts2 tag elements

We currently have a heavy reliance on struts2 in our application. One of the challenges we are facing is to eliminate all default struts2 validation and implement HTML5 with CSS validation instead. For example, when working with a struts2 form: <s:for ...

csshtmlvalidationstruts2

Executing a nested function before moving on to the subsequent code statements

I have a requirement where certain functions in my codebase need to check if a user is logged in before proceeding. Instead of duplicating this check logic, I want to call a single getUser() function each time. Here is the order of operations for the func ...

javascriptreactjsfunctionreact-nativeasynchronous

Populate Select2 with default value using knockout.js

I'm working on a Knockout.js web application that includes a select2 dropdown. My goal is to bind both the id and text values to a variable, not just the id itself. Here's the data I'm working with: var vehicles = [{id: 1, type: 'Car&a ...

htmlselectknockout.jsjquery-select2dropdown

Using jQuery .each() within a PHP foreach loop: A guide

In my code, I have a foreach loop that iterates through an array of images, along with some JavaScript logic to add different classes based on whether the width is greater than or less than the height. The issue I'm facing is that the if function onl ...

javascriptphpjqueryhtml

Alert displayed at the center of the browser when the value surpasses the specified number

My webpage retrieves SNMP data using PHP and displays it with HTML, color-coding the values. I want to add a pop-up alert when a value exceeds a certain number. I have attempted different jQuery solutions without success. The PHP code to get the value: ...

javascriptphpjqueryhtmlcss

Three JS does not support dynamic color changing functionality

In my ThreeJS project, I have created a 3D wall and am attempting to change its color dynamically on a click event. However, the code doesn't seem to be working as expected. Can you help me identify the error in the following code snippet? var materi ...

javascriptthree.js

Position a broader div within a slimmer one

<div id="narrow"> <div id="wide"> </div> </div> In my web layout, there is a div with the ID of "narrow" containing another div with the ID of "wide", which has a wider width than its parent. The div with the ID "narrow" can ...

htmlcss

Move the element that can be dragged with the identifier X to the designated drop area with the identifier

I am attempting to create a function that will allow me to drag a draggable element and drop it into a designated container using their IDs. However, I am unsure of how to get started. dropToContainer("myDraggable", "div3"); function dropToContainer(co ...

javascripthtmldrag

When the 'keyup' event is detected, trigger the function only on keyup

Looking for assistance in setting this to only trigger on keyup events. Can anyone provide guidance? $(function() { $('#acf-field_5a32085c7df98-field_5a3208f87df99').on('keyup', function() { $('#link-headline-fb').text($( ...

javascriptjquerykeyuponkeyup

Caution: Prop type validation failed due to an invalid value being passed to ForwardRef(Slider)

Currently, I'm in the process of building a Material UI range Slider with two values. It functions correctly if initialized like this: const [value, setValue] = React.useState([5,20]); const [value, setValue] = React.useState([val]); const handl ...

javascriptreactjsmaterial-uislider

Shift every ng-repeat child element and display the updated outcome

I am looking to create an animation that will shift all items displayed using the ng-repeat directive to the left, hide the first item, and show a new element in place of the last one. The elements are being displayed using the ng-repeat directive from a ...

javascriptangularjsanimationangularjs-ng-repeat

Showing outcomes by making rapid consecutive AJAX requests

If you need a visual representation, I have a PHP script for a Hotel Management application that showcases a calendar (with columns representing days of the month and rows displaying prices per day). This script can be accessed in edit mode, where it gene ...

phpjavascriptajax

JavaScript JSON conversion from a list

If I have two different lists, such as: list1= ['blue', 'green', 'purple'] list2 = ['circle', 'square', 'triangle'] Is there a way to convert them into a JSON object structure by using another l ...

javascriptjsonlist

There are no router methods in Next.js version 13. How can we trigger a state change during routing?

After updating to next 13 (latest version), it appears that methods from next/router are no longer functioning properly. Trying to use any function from next/router results in a mounting issue, so the documentation recommends using next/navigation instead. ...

reactjsnext.jsreact-hooksnext-router