Android和iOS上的图片大小差异问题答案

【问题标题】：Picture size difference problem on Android and iOSAndroid和iOS上的图片大小差异问题
【发布时间】：2021-06-27 10:31:38
【问题描述】：

我正在尝试创建一个网站。我添加了一张图片。后来，当我在 Android 和 IOS 手机上查看该网站时，我发现图片表现不同。图 1 是 Android Galaxy j-5 手机。 Picture-2 属于 iOS iPhone-6s 屏幕。我希望它看起来像 iOS 屏幕上的 Android 屏幕。我需要修复什么。这是我写的代码。

文件.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;
  }
}

图一

图2

【问题讨论】：

标签： android html css ios reactjs

【解决方案1】：

图片不在背景中，所以后面的属性不是必需的。

试试object-fit: cover; (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)

为了在语义上没问题，考虑将div 替换为figure

【讨论】：

非常感谢。问题直接解决了:)