Question

我想要在另一个div旁边显示这个巨大的图像（我知道，不好，将被一些不同视口尺寸的小图像替换）。这两个元素都在flexbox中，所以flex-items。

我的问题是图像太大了。我想要的是图像占据#test的所有空间，其本身应该最多占据整个水平空间的30％，因此main class='flex-container'占details的70％max-width:30%其余部分包含30％的图像（最好是裁剪而不是缩放）

听起来很简单，对吧？只需将#test添加到max-width:100%; max-height:100%;！

错误！ https://jsfiddle.net/04wohehh/

图像仍然太大。

那么，只需将var array = [ 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, ];添加到img本身，对吗？

同样，没有按预期工作：

https://jsfiddle.net/wqhtqq8d/

Answer 1

这就是你要找的东西吗？

在flex: 0 70%

.details

在flex: 0 30%; display: flex; align-items: center

#test

html,
body {
  margin: 0;
  padding: 0;
}

#info {
  background-color: #2aabd2;
  max-width: 100vw;
  min-height: 100vh;
}

#info nav {
  max-width: 5%;
}

.flex-container {
  display: flex;
}

main {
  background-color: red;
}

.details {
  flex: 0 70%
}

#test {
  flex: 0 30%;
  background: blue;
  display: flex;
  align-items: center
}

.testimage {
  display: block;
  max-width: 100%;
  background-color: blueviolet;
  box-shadow: 0 0 10vh #111;
}

<section id="info" class="flex-container">
  <nav id="node">
    <ul>
      <li>Home</li>
      <li>Other</li>
    </ul>
  </nav>
  <main class="flex-container">
    <div class="details">
      Blablablablabla
    </div>
    <div id="test">
      <img class="testimage" src="http://placehold.it/2000x2000">
    </div>
  </main>
</section>

Answer 2

以下是我的观点：https://jsfiddle.net/hq2ppqr5/

我做了什么：

已添加回max-width: 100%和min-width: 100% img, embed, object, video为了确保img没有溢出/打破笼子＆＃34;
原样从margin-left: auto;删除了#info main 不必要的，flexbox应该照顾好！
将flex-grow:1;添加到#info main，让它填满剩余（水平）空间！
将flex-grow: 1添加到section
的第一个孩子
为nav
将main更改为section（在摆弄时：））

一个注意事项：它在firefox和chrome中看起来仍然不同，但这似乎是填充的问题。

Firefox将两个flex-items均匀地居中，而chrome将图像放在底部。我不确定究竟是什么导致了这一点。

如何在flexbox中制作img缩放？

2 个答案: