Resizing an image for mobile using next/Image

I have been using next/Image in conjunction with tailwind to display an image as a banner that spans the entire width of its container, which happens to be the full page width.

The challenge I am facing is that the image appears distorted and unbalanced on mobile devices, and I need to address this issue. I've attempted solutions from two other resources on this platform (here and here), but haven't found a working fix yet.

I have a suspicion that the problem lies within the height set on the parent div, and I'm open to adjusting it if it can help resolve the issue.

      <div className="relative w-full h-[476px]">
  <Image src="/banner.jpg" alt="Banner" fill />
</div>

javascripthtmlcssnext.js

Answer №1

To accomplish this in CSS, consider utilizing the object-fit property that is suitable for img elements. Experiment with options like object-fit: cover; or object-fit: contain; to determine which one suits your specific scenario.

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

Clearing Input Values in Text Boxes, Dropdowns, and Checkboxes in ASP.NET MVC

Currently, I am working with Asp.net MVC 4 using C#. On one of my pages, I have a Text box, Drop down, and checkbox all together as search filters. There is also a "Clear" button to reset the values. When this button is clicked, I want the textbox value to ...

javascriptc#jqueryasp.net-mvc-4

Having issues with the functionality of single click in jQuery

I tried to remove the attribute element from a list item, but I am struggling to achieve the desired outcome. When clicking on a list item, it should add a class called "important," otherwise, the class should not exist. Here is my attempt using jQuery: ...

javascriptjquery

Having trouble connecting my CSS Bootstrap file in VS Code

Having trouble linking my bootstrap file to my HTML in VS Code. Despite successfully adding the link, it does not seem to be working. https://i.sstatic.net/Yt7VH.jpg ...

cssangularvisual-studio-codebootstrap-4

Using Python within HTML with Python integration

df2 = pd.DataFrame(np.random.randn(5, 10)).to_html() myPage = """ <html> <body> <h2> Programming Challenge </h2> <form action="/execute" method="get"> <sele ...

javascriptjquerypythonajaxdjango

The h2 tag in Bootstrap 4 does not display headers on a new line as expected

While working with bootstrap 4, I found that my headers were not displaying in a single line as expected. Instead, the next content was getting displayed with the header tag without any line breaks. What could be causing this issue? I have double-checked ...

cssbootstrap-4

When I select an option with an object, ng-model is receiving '[object Object]' instead of the actual object for <select> element

Referencing an example from Angular documentation: this link, specifically the section on "Using ngValue to bind the model to an array of objects." In the index.html file: <!doctype html> <html lang="en"> <head> <meta charset="UTF- ...

javascriptangularjs

Searching for an element using Python's Selenium and JavaScript

on this page I am trying to click on the "Choose file" button but I keep getting the error message: javascript error: argument is not defined var1 = sys.argv[1] path = os.path.abspath(var1) driver.get("https://www.virustotal.com/gui/home/upload& ...

javascriptpythonselenium

Having difficulty sending a message from an AngularJS application to an Angular 10 application through an iframe

I have two applications running locally - one is an AngularJS application and the other is an Angular 10 application. I am trying to access a page from the Angular 10 application using an iframe and send a message to it from the AngularJS application. How ...

javascriptangularjsangulariframecross-domain

Finding the Location of the Parent Page within an iFrame

When attempting to retrieve the Parent screen position using the code below, I am consistently receiving a value of 0: window.parent.$(document).scrollTop() ...

jqueryhtmliframe

The options in the dropdown menu vanish when interacting with a jQuery feature that relies on

Recently, I have found AJAX, JSON, and jQuery to be indispensable tools in my coding endeavors. The application I am working on is a replacement for a flawed one, and it is coming along nicely. Despite making progress with the AJAX method, I have encounte ...

javascriptphpjqueryajaxjson

Manipulate PHP/SQL Form: Add, Remove, or Modify items

I have utilized the following code for managing a football fixtures and results administration website. The issue I am encountering pertains to the delete syntax (I suspect that there may be an error related to [ID]). Apart from that, everything else seems ...

phphtmlsqlsql-delete

Having trouble with passing props to data() in Vue.js?

I'm facing an issue where I am unable to pass props to data() in my Vue inline template: <network-index inline-template> ... <network-list :data="networks"></network-list> ... </network-index> Inside the Index.vue file, here ...

javascriptlaravelvue.js

Is there a way to stop the dropdown menu from disappearing when clicking on a popover that was activated from the dropdown?

Are you familiar with creating a popover that is triggered by a dropdown menu using the Twitter Bootstrap javascript components? Could you provide guidance on how to prevent the dropdown menu from closing when a user clicks on the popover? For reference, ...

javascriptjqueryajaxtwitter-bootstrap

What is the best way to maintain a background image in html/ASP.net that remains consistent when the website is relocated?

I've been attempting to designate an image as a background image. According to the information I have come across, it is necessary to use a tilde (~) before the address in order for the site to function properly when placed inside a folder. However, t ...

asp.nethtmlvisual-web-developer-2010

"Organizing a menu in JSON format based on alphabetical

After following this guidance, I successfully created a JSON menu. However, the items are currently sorted by ID and I am in need of sorting them alphabetically. I am unsure about whether using array.sort(); would be applicable in this scenario. Check out ...

javascriptjqueryjson

Guide on adding increasing numbers to Slug with Mongoose

Currently, I am working on a nodejs project using mongoose. My goal is to ensure that when I save a "slug" into the database, it checks if the slug already exists and adds a counter to it before saving. This means that if I have slugs like my-title, my-tit ...

javascriptnode.jsexpressmongoose

jQuery's feature to select all elements except one and its children appears to be malfunctioning in Safari

My goal is fairly simple. I want to make the entire section clickable, except for the span and anything beneath it, so that the link redirects elsewhere. <section id="id" class="message"> <div class="message_body"> <font color="color"> ...

javascriptjqueryhtml

Improper menu alignment following a MenuItem hover event within Material-UI

When a MenuItem is hovered over, the position of the Menu container should remain unchanged. [x] The issue persists in the most recent release. However, downgrading MUI to v4.5.0 results in the expected behavior. Current Behavior ...

javascriptreactjsmaterial-ui

Bootstrap and AngularJS straining against each other

My page navigation and image loading are done using Angular, but now I want to integrate Bootstrap Glyphicon Components. However, the images loaded from the Angular function are not working with Bootstrap. When I remove Bootstrap from my HTML, everything w ...

javascriptangularjshtmltwitter-bootstrap-3

The Express application seems to load forever after a certain period of time

I encountered a peculiar problem with my express application. It was deployed on the server and functioning properly, but after a few hours, when I tried to access the website again, it kept loading indefinitely. Below is my app.js code: const express = r ...

javascriptnode.jsexpressdeployment