Maximizing image size with dynamic height and automatic width using the NextJS Image Component

I am trying to set my images to have a fixed pixel height and automatic width using object-fit: contain.

How can I achieve this with the NextJS Image Component without using layout="fill" so that the intrinsic width of the image (width: auto) is preserved?

.wrapper {
  display:flex;
  flex-wrap: wrap;
}

.wrapper img {
  width: auto;
  height: 100px;
  object-fit: contain;
}
<div class="wrapper">
  <img src="https://picsum.photos/id/237/200/300"/>
  <img src="https://picsum.photos/id/236/300/300"/>
  <img src="https://picsum.photos/id/238/300/100"/>
  <img src="https://picsum.photos/id/239/250/275"/>
  <img src="https://picsum.photos/id/240/400/100"/>
  <img src="https://picsum.photos/id/241/300/300"/>
</div>

The following code does not produce the desired result with the NextJS Image component:

  <div className="wrapper">
     <div className="image-wrapper">
        <Image
          layout="responsive"
          width={image.width}
          height={image.height}
          src={image.src}
          objectFit="contain"
         />
     <div/>
     <div className="image-wrapper">
        <Image
          layout="responsive"
          width={image.width}
          height={image.height}
          src={image.src}
          objectFit="contain"
         />
     <div/>
  </div>



.wrapper {
  display:flex;
  flex-wrap: wrap;
}

.image-wrapper {
  width: auto;
  height: 100px;
}
cssimagenext.js

Answer №1

Implementing the experimental Raw layout feature in the NextJS Image Component was the key to achieving my desired outcome.

UPDATE: The Experimental Raw layout can now be found at next/future/image

Visit this link for more information

.wrapper {
  display:flex;
  flex-wrap: wrap;
}

.img-wrapper {
  height: 100px;
}

.h-full {
  height: 100%;
}

.w-auto {
  width: auto;
}

.max-w-none {
  max-width: none;
}

.object-contain {
  object-fit: contain;
}
<div className="wrapper">
  <div className="img-wrapper">
   <Image
      className="h-full w-auto max-w-none object-contain"
      alt={logo?.ariaLabel}
      src={src}
      layout="raw"
      width={width}
      height={height}
    />
  </div>
  <div className="img-wrapper">
   <Image
      className="h-full w-auto max-w-none object-contain"
      alt={logo?.ariaLabel}
      src={src}
      layout="raw"
      width={width}
      height={height}
    />
  </div>
  <div className="img-wrapper">
   <Image
      className="h-full w-auto max-w-none object-contain"
      alt={logo?.ariaLabel}
      src={src}
      layout="raw"
      width={width}
      height={height}
    />
  </div>
   <div className="img-wrapper">
   <Image
      className="h-full w-auto max-w-none object-contain"
      alt={logo?.ariaLabel}
      src={src}
      layout="raw"
      width={width}
      height={height}
    />
  </div>
  <div className="img-wrapper">
   <Image
      className="h-full w-auto max-w-none object-contain"
      alt={logo?.ariaLabel}
      src={src}
      layout="raw"
      width={width}
      height={height}
    />
  </div>
  <div className="img-wrapper">
   <Image
      className="h-full w-auto max-w-none object-contain"
      alt={logo?.ariaLabel}
      src={src}
      layout="raw"
      width={width}
      height={height}
    />
  </div>
<div/>

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

Can I combine the col and d-flex classes in Bootstrap 5 without breaking any rules?

Is it possible to use both col and d-flex classes together? I want to center the element with the class "description" by combining them. <section class="container-fluid mb-5"> <div class="row"> <div class=&q ...

cssflexboxbootstrap-5

Ways to Get Rid of Line Beneath the Table

Can anyone assist me in removing the underline at the bottom of my table? Here is the code I am using: <table> <tbody> <tr> <td><iframe src="//player.vimeo.com/video/99496559" width="220" height="150" frameborder="0" allowfull ...

htmlcssiframe

Bootstrap 4 Card Body Spinner Overlay with Flex Alignment

Seeking to center a spinner both vertically and horizontally within a bootstrap 4 card body. Despite trying my-auto, justify-content-center & align-items-center, it seems like I'm missing something. I've double-checked the display types and ...

javascripthtmlcssflexboxbootstrap-4

The secret to achieving perfectly even spacing along the vertical axis

I'm working on a card design that contains a div with 3 elements - 2 headers and a paragraph. I need to ensure there is consistent spacing between each element and the top/bottom of the card. Currently, there seems to be too much margin after the last ...

htmlcss

Material-UI's JSS does not adhere to the justify content property

Having trouble aligning elements in my React app using material-ui 1.0 and its JSS solutions. The code I've written below should center justify, but it's not working no matter how I configure it. I suspect there might be a naming issue since mat ...

javascriptcssreactjsmaterial-uijss

Child Theme setup in progress! Beware of the error message: "Unable to access file: file_get_contents9(). The specified stream does not exist."

I am currently in the process of developing a child theme based on my existing theme (Tesseract 2). I have carefully followed the guidelines outlined here, but unfortunately, I keep encountering the following error: Warning: file_get_contents(/home/fletch ...

phpcsswordpress

Aligning a grid container in the middle

#panelb { background: lightblue; display: grid; grid-template-columns: repeat(auto-fit, 300px); } .card { background: gold; } .imgcard { display: block; width: 100%; margin: 0 auto; } <div id='panelb'> <div class=' ...

htmlcsscss-grid

Is there a way to modify CSS styles for a child tag element after hovering over its parent?

Here are my HTML code segments: <div class="div-builder"> <div> <a href="#"> <img src="/photos/20/Apple-Logo-icon.png" width="50" alt="Logo"> </a> <h3>Title</h3> < ...

jqueryhtmlcsshoverclick

Position filter forms on the left side to align with bootstrap cards

I'm having trouble aligning the cards using Bootstrap's row and col- classes. The first three are behaving as expected, but the fourth one isn't cooperating. Any idea why this might be happening and any solutions you can suggest? View the i ...

htmlcssangularsassbootstrap-5

Errors related to Typescript are causing issues with the stock installation of Next.js

Whenever I use typescript with create-next-app, my tsx files are filled with numerous "Problems" messages. These errors only appear in Visual Studio Code and do not affect the build process. I have tried uninstalling vscode, removing all extensions, and ...

javascripttypescriptvisual-studio-codenext.jsjsx

Encountering a ModuleBuildError while setting up Tailwind CSS in Laravel 8

I am currently learning Laravel version 8 and encountered an issue while trying to install Tailwind CSS using the npm command. npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 Here is a detai ...

cssnpmlaravel-mixtailwind-csslaravel-8

An ongoing problem with NextJs 14 middleware is causing users to be continuously redirected to the /login page even after successfully signing in

I'm currently working on a project using Next.js 14 and running into an issue with middleware. Once a user successfully logs in, they get redirected to the /home page. At this point, they should be logged in and able to access protected pages like /d ...

next.jsnext.js13

Determine whether to show or hide a div based on the width of the

Is there a way to dynamically hide a div using Bootstrap 4 based on the screen width? Can this be achieved without using JavaScript? I am particularly interested in hiding certain text elements that are not relevant on smaller screens, such as mobile de ...

csshtmltwitter-bootstrap-4-beta

Alteration of icon size in input field using jQuery unintentionally

My issue involves an input field where users can input text from an array of emojis. When a user selects an emoji, it should display as an icon styled by an external stylesheet. However, there are two problems: The name of the icon appears on top of the ...

jqueryhtmlcss

The production JavaScript bundle in Next.js is lacking minification

In my next.js project, when I generate the production js bundle, it's not minified. For instance, white characters aren't removed. https://i.stack.imgur.com/y1mDD.png package.json { "name": "web", "version": & ...

next.js

How to Create a DataTable Responsive Feature Where All Columns Collapse on Click, Except the Last One?

I am currently utilizing the DataTables library to generate a responsive table. I am aiming to create a feature where all columns in the DataTable can toggle between collapse and expand states when clicked, with the exception of the last column. Below is a ...

javascripthtmlcssdatatableresponsive

Utilizing the NextJs image component with an external URL from jsonplaceholder

For my nextJS project, I am attempting to utilize jsonplaceholder with the /photos route. However, I encountered an error when trying to include images or thumbnails in the Image component as shown below: import Image from 'next/image' <Image ...

next.jsjsonplaceholder

"Enhance Your CSS Styling with an Additional Dot for Dotted Under

Is it possible to make the dots at the end and sometimes beginning of a word thicker and more round? https://i.stack.imgur.com/W9WPi.png ' CODE <span style="border-bottom: 3px dotted #111;">Personal Project Magazine Ads Personal Project Magaz ...

htmlcssdotted-line

Can someone please tell me the specific HTML entity that Flickr uses for the arrow icons in the action menu?

When viewing an image on FLickr () and clicking on the Actions menu button, a pop-up menu with an arrow icon appears. Interestingly, this icon is not a simple image, but rather a combination of two characters (◢◣). Has anyone been able to determine th ...

htmlcss

Adjust the order of list items based on the resolution change

Is there a way to rearrange the order of the list items in an ul when the screen resolution changes, specifically having the last li appear in the first place? Edit: I am attempting to achieve this by using flexbox. .postpreview ul { list-style: none; d ...

jqueryhtmlcss