Discrepancy in image dimensions between Android and iOS

Currently, I am in the process of building a website and have encountered an issue with the display of images on Android and iOS phones. The image appears differently on an Android Galaxy J-5 compared to an iOS iPhone 6s screen. My goal is to make it look consistent across both platforms. Can someone please advise me on what needs to be fixed in the code below?

File.js

import React from "react";
import "./style.css";
import image from "./../../../../commons/assets/images/circlecross.svg"

function HomeImageTwo({ info }) {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        margin: "0",
      }}
    >
      <img
        src={image}
        className="home-ImageTwo"
      ></img>
    </div>
  );
}

export { HomeImageTwo };

style.css

.home-ImageTwo {
  width: 100%;
  height: auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  max-width: 2500px;
}

@media only screen and (max-width: 768px) {
  .home-ImageTwo {
    width: 100%;
    height: auto;
  }
}

Link to Picture 1: https://i.sstatic.net/tBAmj.jpg

Link to Picture 2: https://i.sstatic.net/8WODv.jpg

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

What is the process for incorporating attribute values when constructing XML with fast-xml-parser?

Latest fast-xml-parser update: version 4.3.6 Description I'm trying to incorporate an xml attribute (tokenized="true") in this format : <custom-tag tokenized="true">test test &gt; 14</custom-tag> Input Code var def ...

What is the best way to pass numerous props to a React component when using Material-UI props?

I am facing an issue with my React component that has MUI DrawerProps: export default function Navigator(props: DrawerProps) However, I require two more props like this: interface Props { items: string; onItemClick: (nr: number) => void; } If I t ...

Having trouble getting the ScrollView to work in a ConstraintLayout with a GridLayout

I am attempting to create a dashboard that resembles the layout found at this link, but with a single column. The goal is to make the dashboard scrollable while maintaining the GridLayout structure. I have been struggling to add a ScrollView without disr ...

Issues with inline display not being rendered properly in HTML/CSS

I've been attempting to place an image and an h1 element on the same line. After researching online, I attempted using display:inline; for both the parent div element as well as each individual element. This is my current code: <div style="displa ...

Enhance the responsiveness of a ReactJS landing page

We have developed a large React application without relying on any existing UI framework. All of our UI components have been custom-built. Now, we are looking to make the landing page section responsive within the application, which will require the imple ...

Expand the spectrum of the input range

Is there a way to make the cursor and bar of a range input bigger without changing their length? <input id="speed" type="range" min="10" max="80" /> Any suggestions on how to achieve this? Appreciate your assistance. ...

Translate JSX to JavaScript in C# with the help of Babel

The reactjs nuget packages are successfully functioning as intended. My goal is to transpile JSX syntax to JavaScript on the server side using a string retrieved from the database, rather than from a .jsx file. React offers a Babel class in C# (utilizing ...

Experiencing a Runtime Exception while executing the BroadcastReceiver on an Android device?

When attempting to run an AsyncTask upon a change in the wifi network status, I encountered an "InstantiationException" error. This occurred after changing the wifi network while running the app. 06-12 10:31:59.881 24464-24464/com.poliveira.apps.material ...

Looking to retrieve the value of a selected checkbox within a horizontally laid out HTML table

Trying to extract values from a table with a horizontal header when checkboxes are selected. The goal is to retrieve the values of the selected column for all rows. Code snippet provided below. <script src="https://ajax.googleapis.com/ajax/libs/jquer ...

Implementing a Create-React-App with Rails API integration on Heroku platform

I'm encountering an issue with deploying my react/rails app on Heroku. Although I've successfully deployed it and the rails server is running, the react app itself is not displaying. It seems like I'm very close to resolving the issue but I ...

Is it possible to stay on the current page even after a refresh in React Router?

Hello, I am new to using React and encountering an issue with React Router. I am currently navigating through different pages using useNavigate in react-router-dom, and everything is functioning correctly. However, I face a problem when I refresh the page. ...

Using the power of ReactJS, efficiently make an axios request in the

After familiarizing myself with Reactjs, I came across an interesting concept called componentDidUpdate(). This method is invoked immediately after updating occurs, but it is not called for the initial render. In one of my components, there's a metho ...

Is it possible to trigger the execution of two functions simultaneously by using onClick in JavaScript?

I currently possess: one = () => { //perform a task } two = () => { //execute an action } <div> <button onClick={/*this.one, this.two (it doesn't function)*/}>Go</button> </div> Is there a way to invoke two f ...

Is it necessary for two sibling elements to be of the same type in order for their margins to collapse together?

I am currently working on enhancing the visual appearance of a Bootstrap 4 card and encountered an issue: https://i.stack.imgur.com/p8Qzhm.png The spacing between the About the gig heading and the top Date item appears to be uneven. I would like to make ...

Is there a way to cancel hiding on a q-dialog?

I'm currently working on integrating a confirmation modal within a dialog box that includes form input fields. The purpose is to alert the user when they try to exit without saving their changes. The modal should appear every time the user modifies th ...

What are the benefits of using one state in React with useState compared to having multiple states?

Is it more beneficial to optimize and enhance code readability in React using Hooks and Functional components by utilizing a single setState hook or having multiple hooks per component? To further elaborate, let's consider the following: When workin ...

Leveraging useContext with ImmutableJS

My data Object is stored as the context, and I populate it with API responses. However, I suspect there may be performance issues with my current setup. I have looked into ImmutableJS but can't find any information on integrating it with ContextAPI. W ...

One XMLHTTPRequest with multiple replies

My requirement is to have a consolidated XMLHttpRequest call that returns three unique items. These items consist of an HTML formatted table and two separate sets of JSON data for Google Charts. The reason behind this design is that the chart data relies o ...

Using the `document.querySelector` method to target the `.mat-progress-bar-fill::after` element

Is there a way to dynamically adjust the fill value of an Angular Material Progress Bar? In CSS, I can achieve this with: ::ng-deep .mat-progress-bar-fill::after { background-color: red; } However, since the value needs to be dynamic, I am unable to do ...

What is the best method for displaying a table using a JSON array?

I have a JSON array that I want to display in a table using React boxes: [ { id: 1, color: "red", size: "small" }, { id: 2, color: "blue", size: "medium" }, { id: 3, color: "green", size: "large" }, { id: 4, color: "yellow" ...