Question

我创建了一个codepen，所以你可以看到我的意思。 a元素从脚本中获取height，完整代码在除iOS之外的所有设备上都很有效。在移动版Safari（我还没有测试桌面版）上，图像会被拉伸。首先我认为它是因为height: 100%我已经给它了，但在删除它之后，它仍然无法正常工作。

目标是使图像以柔性为中心。我在那个页面上使用了flex alot，所以我也希望在那里使用它。

http://codepen.io/notyetnamed/pen/gaboXK

编辑：我在OS X上通过browserstack测试了它，如果你让窗口足够小，也会出现同样的问题。

Answer 1

好的我改变了很多。我将为您提供亮点：

缩小所有flex属性。 Safari的唯一前缀是-webkit。
设置.body position: relative和height: 100vh and宽度：100vw`
给内部<div>一个名字.content
制作.box块级<section>
制作.body一个<main>
放置彩色边框以显示每个元素的位置和大小。

<强>＆GT;＆GT;＆GT; DEMO

<强> CSS

＆＃13;

html {
  box-sizing: border-box;
  font: small-caps 400 16px/1.45'Source Code Pro';
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0 solid transparent;
  text-decoration: none;
  list-style-type: none;
}
body {
  color: #fff;
  background: #000;
  height: 100vh;
  width: 100vw;
}
.frame {
  position: relative;
  outline: 2px solid yellow;
}
.frame:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
  padding-bottom: 1.5em;
}
.content {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  outline: 2px solid blue;
  background-image: url(http://placehold.it/818x435/000/fff.png&text=818x435);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  z-index: 555;
}
.caption {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 50%;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 1.8em;
  z-index: 999;
}
.caption h2 {
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 4;
  margin-bottom: 1em;
  color: #000;
}
.caption p {
  font-size: .8rem;
  color: #000;
}

＆＃13;

<main>

  <div class="frame">
    <a class="content" href="https://stackoverflow.com/">
      <div class="caption">

        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p>

      </div>
    </a>
  </div>
</main>

＆＃13;

更新：这是一个居中的版本没有 flexbox。我认为在尝试覆盖flex-items时，Firefox和/或Safari中存在一个错误。

<强>＆GT;＆GT;＆GT; DEMO

图像在Safari上展开，显示为flex

1 个答案: