css - 响应式 img 容器 div Safari 5 img 显示不正确

Question

遇到了这个非常烦人的问题，我检查过的所有其他浏览器都设法创建了我正在搜索的内容，但是 Safari 5.0.1 及以下版本似乎与我的代码不一致。 所以我的问题是，我在容器中得到的图像没有正确填充容器。 我正在使用纵横比技巧，我不能在图像上硬编码任何东西，因为在某些地方，东西是通过 CMS 使用的。哦，我需要 flex 东西来实现相等的列高，因为来自数据库的文本可能会有所不同以及..任何帮助/提示将不胜感激..谢谢!

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 似乎根据“相对于包含 block 的高度”计算了它的边距顶部。现在搜索它是从哪个版本开始修复的。不幸的是，我会我认为别无选择，决心通过破解来解决此问题..

Answer 1

除了使用 flexbox，你还可以使用

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>