Question

我正在处理一个投资组合页面，并且注意到在Safari中，我的预览图像的缩放方式与在Chrome中不同。似乎是在视口高度越高的情况下拉伸图像，在Chrome中似乎将缩放比例基于内容容器。我已将max-height设置为100%，并且尝试更改object-fit属性，但是它们似乎没有作用。甚至下面一行中的幻灯片buttons在Safari中也比在Chrome中更高。我在查明是什么原因时遇到了麻烦。

请注意，我已经为代码段修剪了很多代码，并且只保留了必要的内容以使其显示与整页的上下文相同。因此，就整体样式而言，这可能有点麻烦。我主要关心figure，img和figcaption的样式，尽管grid属性可能有所帮助。

非常感谢您提供的任何帮助，我真的很沮丧！

@import url('https://fonts.googleapis.com/css?family=Poppins|Raleway');
body {
  color: #BADBC8;
  display: grid;
  grid-template-rows: 15vh 1fr 15vh;
  grid-template-areas: "header" "main" "footer";
}

a {
  color: #C5E8D0;
  text-decoration: none;
}

.container {
  display: grid;
}

main {
  grid-area: main;
  min-height: 500px;
  background: #030021;
  font-family: 'Raleway', sans-serif;
  grid-template-columns: .1fr 1fr .1fr;
  grid-gap: 10px;
}

#main-content {
  grid-column-start: 2;
  grid-row-gap: 10vh;
  grid-template-rows: 100vh;
}

.sec-content {
  grid-template-columns: .5fr 1fr;
}

.sec-title {
  grid-column: span 2;
  align-self: center;
  justify-self: center;
}

.sec-description {
  grid-column: 1;
  align-self: center;
  justify-self: center;
}

.fig-content {
  grid-column: 2;
}

.fig-content figure {
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr .15fr;
  grid-auto-flow: column;
}

.fig-content figure img { /* This is where I think the issue is occuring*/
  justify-self: center;
  max-height: 100%;
}

.fig-content figure figcaption {
  grid-row: span 2;
  place-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  font-size: 1vw;
  background: grey;
  padding: 10px 10px 10px 15px;
}

.fig-content .slide-buttons {
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.fig-content .slide-buttons button {
  padding: 2px;
  text-decoration: none;
  outline: none;
  font-family: 'Poppins', sans-serif;
  font-size: .75rem;
  border-radius: 3px;
  border-style: none;
  background: #140847;
  color: #BADBC8;
}

<body>
  <main class="container">
    <div id="main-content" class="container">
      <section id="sec-1" class="era-content container">
        <div class="sec-title">
          <h1>Section 1</h1>
        </div>
        <div class="sec-description">
          <ul>
            <li>Sample:</li>
            <li><span>Sample</span></li>
            <li><span>Sample</span></li>
            <li><span>Sample</span></li>
          </ul>
        </div>
        <div class="fig-content container">
          <figure class="container">
            <img src="https://dummyimage.com/400x1388/000/fff" alt="Portfolio 1">
            <span class="slide-buttons container">
							<button class="previous slide">previous</button>
							<button class="next slide">next</button>
						</span>
            <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat rhoncus magna, vel imperdiet nunc. Nulla viverra interdum faucibus. Quisque vitae congue ipsum, sed pulvinar lorem. Cras ut sagittis libero, vel posuere tortor. Donec enim
              nibh, euismod ac varius elementum, vehicula et lorem. Mauris cursus viverra velit non blandit.</figcaption>
          </figure>
        </div>
      </section>
    </div>
  </main>
</body>

网格列中的图像在Safari中无法正确缩放，但在Chrome中工作正常

0 个答案: