相关疑难解决方法(0)

我在IE11上遇到了与flexbox有关的问题,虽然我知道有很多已知问题,但我还是找不到解决方案......

<div class="latest-posts">
    <article class="post-grid">
        <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
        <div class="article-content">
             <h2>THIS IS POST TITLE</h2>
             <p>BLAH</p>
        </div>
    </article>
</div>

而CSS ......

img {
  max-width: 100%;
}

.latest-posts {
  margin: 30px auto;
}

article.post-grid {
  width: 375px;
  float: left;
  margin: 0 25px 100px 0;
  padding-bottom: 20px;
  background-color: #fff;
  border: 1px solid #f3f3f3;
  border-radius: 2px;
  font-size: 14px;
  line-height: 26px;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
}
.article-content {
  padding: 20px 35px;
}

图像在弹性容器内被拉伸.

应用align-items: flex-start …

我正在寻找对象适合的替代选项:包含因为Internet Explorer不支持它.这是我的示例代码

.cbs-Item img {
    height: 132px ! important;
    width: 132px ! important;
    object-fit: contain;




<div  class="cbs-Item">
  <img alt="image" src="" width="146" style="BORDER:0px solid;">
</div>

有解决方案吗

我已经制作了一个1fr 1fr 1fr行的网格模板.在中间行,有一个内嵌图像列表.

在Chrome和Firefox中,图像尊重网格行的高度并正确适应.但是,在Safari 10.1.2和Safari TP 31中,似乎存在溢出行的图像组合而未适当缩放图像宽度.

也许我做错了什么？或者这是一个Safari bug？如果是这样,有解决方法吗？

Safari 10.1

Safari TP

Chrome 60

#grid {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}

#thumbnailContainer {
  position: inherit;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

img {
  display: inline;
  height: 100%;
  width: auto;
}

header,
footer {
  background-color: dodgerblue;
}

<div id="grid">
  <header>Header</header>
  <div id="thumbnailContainer">
    <img src="https://c2.staticflickr.com/8/7591/16903911106_b7ced9d758.jpg">
    <img src="https://c1.staticflickr.com/9/8740/16927517701_810fcb2a7c.jpg">
    <img src="https://c2.staticflickr.com/8/7637/16902583636_15138a68f0.jpg">
    <img src="https://c2.staticflickr.com/8/7614/16927530091_6755845b13.jpg">
    <img src="https://c1.staticflickr.com/9/8700/16741099010_d0ecd9df1f.jpg">
    <img src="https://c1.staticflickr.com/9/8745/16927567841_74fd20d01d.jpg">
  </div>
  <footer>Footer</footer>
</div>

https://jsfiddle.net/fqkjhh6m/1/

我有一个100vh的容器(减去固定的导航高度).

<section class="container">

在这个容器里面我有一些文字:

 <div class="text">
    <p>title</p>
 </div>

由于内容是动态的,因此可以是任何长度.

在本文下面我有一个图像:

 <div class="image">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg">
 </div>

图像需要填充100vh( - 导航高度)容器的其余部分.

我用:

.container{
    display:flex;
    flex-flow: column nowrap;
    ....

小提琴

我遇到的问题是我需要将图像作为剩余空间的高度.

我怎样才能做到这一点？在我的小提琴中,如果你的屏幕很小,它会被切断,如果你的屏幕很大,它就不会填满空间.高度:100%无法工作,使其太大.

Flex解​​决方案只是请,没有表格技巧 - 谢谢!

我确信以前曾经问过,但我找不到确切问题的答案.

我想要一个非常简单的布局:

-------------------
      header
-------------------
         |
 content | graphic
         |
-------------------

哪里:

• 标题高度由字体大小设置;
• 内容具有固定的最小宽度;
• 考虑到这两个约束并保持纵横比,图形尽可能大(即它将与屏幕一样高,减去标题,除非这会使内容面板太窄);
• 考虑到这三个限制,内容尽可能宽.

[编辑添加:]

• 垂直:当宽度+宽高比约束导致它比最大高度短时,图像垂直居中
• 水平:图像总是很难对着屏幕的右侧(除了任何手动添加的填充),内容总是一直向上到图像的左侧(除了任何手动添加的填充之外).

我已经尝试过使用flexbox并且满足前三个约束,但是我无法让内容窗格水平增长以填充图像未使用的空间.我得到的最好的结果是使用下面的HTML和CSS,但正如您在下面的屏幕截图中看到的,这导致内容div和图像占用相同的大小而不是内容div将图像推向右侧.(这是两者都设置flex = 1的预期行为,所以我没想到它会起作用;但至少这给我的图像大小表现得我喜欢).

我正在使用的是https://jsfiddle.net/uv566jc3/:

.grid {
  border: solid 1px #e7e7e7;
  height: 95vh;
  display: flex;
  flex-direction: column;
}
.header {
  flex: 0;
}
.grid__row {
  flex: 1;
  display: flex;
  flex-direction: row;
}
.grid__item {
  flex: 1;
  padding: 12px;
  border: solid 1px #e7e7e7;
}
img {
  flex: 1;
  object-fit: contain;
  overflow: hidden;
  border: solid 1px #e7e7e7;
}

<div class="grid"> …

我有一个宽度大于高度的横幅图像。我有一个显示不同尺寸图像的容器 div，对于横幅样式，我需要它拉伸和/或挤压以在两个方向上填充父 div。我看过object-fit:fill，但它似乎只是水平拉伸图像 - 它没有做任何让它垂直填充 div 的事情。

一个有效的例子在这里；代码如下所示：

.tile {
  position: relative;
  float: left;
  margin: 10px;
  border: 4px solid green;
  height: 400px;
}

.deal {
  width: 342px;
  background: #ffffff;
}

.tileImage.promo {
  object-fit: fill;
}

<div class="tile deal hsNational active">
  <img class="tileImage promo" src="https://cdn.pixabay.com/photo/2015/12/13/09/42/banner-1090835_960_720.jpg" height="200px">
</div>

我究竟做错了什么？（我已经尝试了 的各种值object-fit，但没有一个能满足我的需要。）图像应该水平挤压并垂直拉伸以完全填充绿色边框内的区域。