Question

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

我使用绝对定位的包装器将图像置于缩略图框架中。（仅限）在移动野生动物园中，不会显示图像。如果您检查.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

Answer 1

尝试使用此链接修复任何浏览器问题：

（下载respond.min.js）

https://github.com/scottjehl/Respond

下载后将其添加到您的代码中：

<script type="text/javascript" src="respond.min.js"></script>

尝试使用此链接修复居中问题：

http://designshack.net/articles/css/how-to-center-anything-with-css/

移动Safari：绝对定位容器中无法看到100％高度的图像

1 个答案: