CSS：父 div 忽略子宽度-解网

问：

我正在使用图像将 div 保持在 1：1 的纵横比。div 应该填充 flex-container 内的可用高度。flex-container 的宽度应适合其内容。

square-div 具有正确的尺寸，但其父 div 忽略了其宽度。

为图像宽度设置绝对值使父级使用正确的宽度，但我需要动态调整图像大小，所以不幸的是这不是一个选项。谁能帮忙？

.parent {
  align-items: center;
  background-color: black;
  border-radius: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  overflow: hidden;
  padding: 16px;
  position: relative;
  width: fit-content;
  z-index: 1;
}

.header,
.footer {
  height: 48px;
  width: 100%;
}

.square {
  box-sizing: border-box;
  flex-grow: 1;
  display: block;
  position: relative;
  width: auto;
}

.square>img {
  display: block;
  height: 100%;
  width: auto;
}

<div class="parent">
  <div class="header"></div>
  <div class="square">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="100" height="100" />
  </div>
  <div class="footer"></div>
</div>

我尝试过的其他事情：
将父div设置为不起作用。
将父 div 设置为不起作用。
将父 div 设置为不起作用。width: autodisplay: inline-flexdisplay: table

CSS Flexbox 宽高比

我删除了图像的 100 和/高度 - 为了方便起见，我在这里使用您的粘贴图像作为“图像” - 不要让它分散您的注意力。我还更改了一些颜色并在图像上放置了边框，以显示此示例的位置。（实际上，CSS下面的大部分内容都是为了这个目的）除了图像.parent {

我使用了一些CSS只是为了使元素内容居中。

  display: grid;
  place-items: center;

body {
  box-sizing: border-box;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.parent {
height: 100vh;
  background-color: #00000040;
  border-radius: 0.75em;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100vw;
  padding: 1em;
}

.header,
.square,
.footer {
  display: grid;
  place-items: center;
}

.header {
  background-color: #00ff0020;
}

.footer {
  background-color: #0000ff20;
}

.square {
  background-color: #ff000020;
  overflow:auto;
 }

.square>img {
  border: solid 1px magenta;
  height:100px;
  width:100px;
}

<div class="parent">
  <div class="header">test header</div>
  <div class="square">
    <img src="https://i.stack.imgur.com/L7pL9.jpg" />
  </div>
  <div class="footer">footer<div>MORE test text</div></div>
</div>

“页脚和页眉的高度取决于它们的内容，”：是的，这样做。“正方形”元素应该填充剩余的高度“：是的，只需将图像大小设置为任何大小，然后更改为我编辑以执行此操作（对孩子说大小，休息一下，对孩子说大小）10emauto1fr auto 1fr

0赞 Mark Schultheiss 9/19/2023

将图像更改为您需要的任何大小;我随机选择了 200px;但这可能来自图像本身等。

0赞 fritzweatshirt 9/19/2023

我对你的样式做了一个jsfiddle，并对其进行了调整，希望我的观点变得更加清晰。页脚和页眉不应该填充父级，只有图像才是。使用网格布局时，似乎没有办法使中间行自动拉伸超过可用高度并将其他元素推到边缘。jsfiddle.net/fritzweatshirt/0md94a5b/22

上一个：过渡的区别：缩放 VS 过渡：转换 VS 过渡：全部

下一个：IntelliJ 黄瓜 .ClassNotFoundException

CSS：父 div 忽略子宽度

CSS: Parent div ignores child width

评论

评论