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如何显示它的屏幕截图。而且看来，我被告知，三星平板电脑浏览器会做同样的事情。（不知道究竟是哪个btw，但我希望解决这个问题也能解决） http://noordkust.eu/problems/stackoverflow.jpg

暂时编辑.. 好的，所以这里是我正在谈论的网站，它是在大图后的主页上的第一件事。 http://steeleryachts.com/nl/

另一个编辑!! 在经过大量搜索之后，似乎Safari 5根据“相对于包含块的高度”来计算它的边缘顶部。现在从哪个版本开始搜索它已被修复..我将不幸的是，我认为别无选择，决心解决这个问题。

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>

响应式图像容器div Safari 5 img无法显示正确

1 个答案: