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