图像在不同的浏览器上看起来有所不同

Question

我将其高度设置为100％的图像在Safari上看起来有所不同。在Chrome上看起来不错，但在Safari上效果不佳。我尝试更改img容器div的高度，但是没有用。我还发现，当我从img容器中取出“ overflow：hidden”时，Chrome上的图像看起来与Safari上的图像相同。与此有关吗？

Chrome

Safari

ProjectBox.js

export class ProjectBox extends Component {
  render() {
    return (
      <div className="main-container">
        <div className="proj-description">
          <span>
            <div className="description-header">
              <h4>{this.props.title}</h4>
            </div>
          </span>
          <p>{this.props.description}</p>
          <div className="stacks">
            <h6>Stacks Used: </h6>
            <ul>
              {this.props.stacks.map((stack) => {
                return <li key={stack}>{stack}</li>;
              })}
            </ul>
          </div>
        </div>
        <div className="img-container">
          <a href={this.props.url} target="_blank" rel="noopener noreferrer">
            <img
              src={this.props.img}
              height="100%"
              width="100%"
              alt="Img Not Found"
            ></img>
          </a>
        </div>
      </div>
    );
  }
}

App.scss

@mixin resume-box {
  background-color: white;
  height: 350px;
  width: 700px;
  margin: auto;
  overflow: hidden;
  -webkit-box-shadow: 0 0 15px 3px #b0abaa;
  -moz-box-shadow: 0 0 15px 3px #b0abaa;
  box-shadow: 0 0 15px 3px #b0abaa;
}

@mixin project-box {
  @include resume-box;
  height: 400px;
}

 // ProjectBox Component Style
  .main-container {
    @include project-box;
    margin-top: 80px;

    .proj-description {
      display: inline-block;
      width: 55%;
      position: relative;
      height: 100%;
    

      .description-header {
        background: blue;
        width: 10px;
        height: 50px;
        position: absolute;
        margin-top: 50px;

        h4 {
          margin-left: 35px;
          font-weight: bold;
          color: blue;
        }
      }

      p {
        position: absolute;
        margin: 130px 30px 0px 30px;
      }

      .stacks {
        position: absolute;
        margin: 220px 30px;
      }
    }

    .img-container {
      width: 45%;
      height: 100%;
      display: inline-block;
      overflow: hidden;
    }
  }
}