css 如何强制图像采用容器给出的所有可用高度

vbopmzt1 于 2023-04-08 发布在其他

关注(0)|答案(2)|浏览(85)

我有两个<image /> s和一个<p/>，每个都包裹在一个<span />中，它们又是一个<div />的查尔兹。这两个图像具有不同的尺寸。我需要它们总是占用可用宽度的一半（这是可行的），然后将它们缩放到可用高度的100%。后者不起作用。

.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    column-gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.image-caption-wrapper {
    width: 50%;
    height: 100%;
}

.image {
    width: 100%;
    object-fit: cover;
    height: 100%;
}

p {
  margin: 0;
}

<div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <div class="container">
    <span class="image-caption-wrapper">
      <img class="image" src="https://dummyimage.com/800x200/000/fff"/>
      <p>Some Image Caption</p>
    </span>
    <span class="image-caption-wrapper">
      <img class="image" src="https://dummyimage.com/600x400/000/fff"/>
      <p>Some Other Image Caption</p>
    </span>
  </div>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

为什么800 x 200图像没有占用所有可用的高度，即使它的高度设置为100%？

css

来源：https://stackoverflow.com/questions/75918299/how-to-force-image-to-take-all-available-height-given-by-container

2条答案

按热度按时间

ttp71kqs1#

你需要给主块（.container）给予高度，因为子块不能理解它们需要100%填充什么。

赞(0）回复(0）举报 2023-04-08

pengsaosao2#

你好

我理解你的问题“* 为什么800 x 200图像没有占用所有可用的高度，即使它的高度被设置为100%？*”。所以让我解释一下你如何纠正这个问题。

.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    column-gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.image-caption-wrapper {
    width: 50%;
    height: 100%;
}

您的代码由flex布局组成，但如果您想像您所说的那样跨越两个图像元素，则需要使用grid布局。

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 50px 0;
}

.image-caption-wrapper {
  width: 100%;
  height: 100%;
}

上面的代码帮助我们有效地放置图像，我们删除了width: 100%，因为div是块级元素，所以默认情况下它会自动占用width的100%。
我们使用margin或50px作为顶部和底部沿着将.image-caption-wrapper的宽度更改为100%，以便我们的两个图像将占据整个空间
希望此反馈对您有帮助！

赞(0）回复(0）举报 2023-04-08

我来回答

css 如何强制图像采用容器给出的所有可用高度

2条答案

相关问题

热门标签

最新问答