2

演示：http ://codepen.io/malte/pen/kDlbt

我正在使用绝对定位的包装器将图像置于缩略图框架的中心。（仅限）在移动 Safari 上，图像不会显示。如果您检查 .image-pos 容器，您会看到高度已正确设置为其父级的大小。对其应用固定的 px 高度将使图像显示出来......有谁知道如何解决这个问题？它适用于任何桌面浏览器...

HTML：

<div class="wrapper">
      <div class="thumb-grid">
         <div class="thumb">
          <a href="#" class="image">
            <div class="image-pos">
              <img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
            </div>
          </a>
          <div class="details">
             <h5>Image Title</h5>
          </div>
        </div>

         <div class="thumb">
          <a href="#" class="image">
            <div class="image-pos">
              <img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
            </div>
          </a>
          <div class="details">
             <h5>Image Title</h5>
          </div>
        </div>

          <div class="thumb">
          <a href="#" class="image">
            <div class="image-pos">
              <img src="http://images.weserv.nl/?url=static.living.is/gallery/original/016e551de2f53d58e7f4acd68279e6a1.JPG&il&w=600" />
            </div>
          </a>
          <div class="details">
             <h5>Image Title</h5>
          </div>
        </div>
      </div>
    </div>

CSS：

.wrapper {
  width: 600px;
  margin: 30px auto 0
}

.thumb-grid {
  text-align: justify;
}

.thumb-grid:after {
        content: '';
        display: inline-block;
        width: 100%;
}

.thumb {
        position: relative;
        display: inline-block;
        width: 31.5%;
        height: 0;
        padding-top: 29%;
        margin-bottom: 6%;
}

.image {
    height: 73%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
  vertical-align: top;
  display: block;
  border: 1px solid #eee;
}

.image-pos {
    height: 100%;
    left: 50%;
    margin-left: -300px;
    position: absolute;
    text-align: center;
    width: 600px;
}

.image-pos img {
  height: 100%;
  max-height: 100%;
  min-height: 100%;
  max-width: none;
  width: auto;
  display: inline;
  border: 0;
}

.details {
  height: 27%;
  position: absolute;
  top: 73%;
}

.details h5 {
  margin: 0;
  padding-top: 5px;
}

演示：http ://codepen.io/malte/pen/kDlbt

4

0 回答 0