响应img容器displaying 5 img显示不正确

Question

遇到了这个非常烦人的问题，我检查过的所有其他浏览器都设法创建了我正在搜索的内容，但是Safari 5.0.1及以下版本似乎与我的代码不一致。所以我的问题是，我在一个容器里得到的图像不能很好地填充这个容器。我正在使用高宽比技巧，我不能硬编码图像上的任何东西，因为在某些地方，东西是通过CMS使用的。哦，我需要同样的栏高的弹性材料，因为来自DB的文本也可能有变化。任何帮助/建议都将不胜感激。谢谢!

HTML

​

	#items-row::after {
	  display: table;
	}
	#items-row {
	  display: flex;
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: -webkit-flex;
	  width: 100%;
	  height: 100%;
	}
	#items-row .item {
	  width: 32%;
	  margin-left: 0.5%;
	  margin-right: 0.5%;
	  float: left;
	  background-color: #f5f5f5;
	  padding-bottom: 10px;
	  min-height: 100%;
	  display: inline-block;
	}
	#items-row .item .item-image {
	  height: 0px;
	  padding-top: 50%;
	  position: relative;
	  background-color: #666;
	  width: 100%;
	  overflow: hidden;
	  display: inline-block;
	}
	#items-row .item .item-image img {
	  margin-top: -50%;
	  position: absolute;
	  width: 100%;
	}

<div id="items-row">
  <div class="item">
    <a href="link">
      <div class="item-image">
        <img src="img" />
      </div>
      .....
    </a>
  </div>
  .... contains 3 more items...
</div>

​

这是Safari 5.0.1如何显示它的屏幕截图。看来，所以我被告知，三星平板电脑浏览器也是如此。(我不知道到底是哪一种，但我希望通过解决这个问题也能解决) http://noordkust.eu/problems/stackoverflow.jpg

临时编辑。好的，这是我说的网站，在大图片之后的首页。http://steeleryachts.com/nl/

又一次编辑！！似乎经过大量搜索后，Safari 5根据“相对于包含块的高度”计算它的边缘顶部。现在搜索从哪个版本开始它是固定的。我很遗憾，我想没有别的选择了，下决心解决这个问题。

Answer 1

而不是使用柔性盒，您可以使用

display: inline-block;

制造出类似于：

​

.container {
  width: 24%;
  height: 300px;
  background: lightgray;
  display: inline-block;
  overflow: hidden;
  margin-top:10px;
  box-shadow:0px 0px 5px black;
}
.image {
  max-height: 60%;
  width: 100%;
  overflow: hidden;
}
.caption {
  text-align: center;
}

h1{
text-align:center;
}

<h1>HEADING</h1>

<hr/>

<div class="container">
  <div class="image">
    <img src="http://placekitten.com/g/200/300" alt="" />
  </div>
  <div class="caption">hello. this is a caption</div>
</div>

<div class="container">
  <div class="image">
    <img src="http://placekitten.com/g/200/300" alt="" />
  </div>
  <div class="caption">hello. this is a caption</div>
</div>

<div class="container">
  <div class="image">
    <img src="http://placekitten.com/g/200/300" alt="" />
  </div>
  <div class="caption">hello. this is a caption</div>
</div>

<div class="container">
  <div class="image">
    <img src="http://placekitten.com/g/200/300" alt="" />
  </div>
  <div class="caption">hello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a caption</div>
</div>

<hr/>

​

事实上，这可以减少很多，但为了你的学习目的，我将把它留在这里。

这个设计使“标题”成为一个固定的高度，如果内容超出这个高度，那么它将滚动：

​

.container {
  height: 300px;
  width: 24%;
  position: relative;
  background-color: lightgray;
  display: inline-block;
  vertical-align: top;
}
.caption {
  text-align: center;
  background-color: lightgray;
  height: 300px;
  max-height: 300px;
  overflow: auto;
  align-content:center;
}
img{
  height:100%;
  }
.imagewrapper{
  width:100%;
  height:100%;
  overflow:hidden;
}

<div class="wrapper">
  <div class="container">
    <div class="imagewrapper">
    <img src="http://placekitten.com/g/400/200" alt="" />
      </div>
    <div class="caption">hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm
      the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption</div>
  </div>

  <div class="container">
    <div class="imagewrapper">
    <img src="http://placekitten.com/g/200/300" alt="" />
      </div>
    <div class="caption">hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption</div>
  </div>

  <div class="container">
    <div class="imagewrapper">
    <img src="http://placekitten.com/g/200/200" alt="" />
      </div>
    <div class="caption">hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm
      the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the long caption</div>
  </div>

  <div class="container">
    <div class="imagewrapper">
    <img src="http://placekitten.com/g/200/200" alt="" />
      </div>
    <div class="caption">hi. I'm the caption</div>
  </div>
</div>

​