css 使img填充整个高度

u4vypkhs  于 2023-10-21  发布在  其他
关注(0)|答案(5)|浏览(94)

我试图让左边的图像占据整个高度，不管右边有多少内容（见截图）。

你必须将视口设置为850px或更小才能看到我在说什么。

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: purple;
  width: 100%;
  line-height: 1.5;
  font-size: 0.9rem;
}

.item-1 {
  max-height: 100%;
  width: auto;
  flex-basis: 25%;
  flex-grow: 0;
  max-width: 25%;
  background-color: lightblue;
}

.item-1-direct-child {
  min-height: 100%;
}

img {
  max-height: 100%;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  object-fit: cover;
  min-height: 187px;
}

.item-2 {
  flex-basis: 75%;
  flex-grow: 0;
  max-width: 75%;
  background-color: orange;
}

.item-2-direct-child {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-top: 24px;
}

h4 {
  margin: 0px;
  margin-bottom: 20px;
}

.button-container {
  display: flex;
  justify-content: flex-end;
}

.button-container>a {
  text-decoration: none;
}

button {
  margin-top: 25px;
}
<div class="flex-container">
  <div class="item-1">
    <div class="item-1-direct-child">
      <img src="https://picsum.photos/200/300" />
    </div>
  </div>
  <div class="item-2">
    <div class="item-2-direct-child">
      <h4>Headline</h4>
      <span>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      </span>
      <div class="button-container">
        <a>
          <button>
          Button
          </button>
        </a>
      </div>
    </div>
  </div>
</div>
css

5条答案

按热度按时间
s6fujrry

s6fujrry1#

你有正确的CSS，但你用错了。
图像可以设置为<img>标签或作为CSS background-image。您的CSS试图为图像元素设置背景图像，这毫无意义。
相反，删除<img>标记及其CSS。使用此CSS

.side-image-bg {
  background-image: url('https://picsum.photos/200/300');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

并将该类添加到sidebar元素中。

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: purple;
  width: 100%;
  line-height: 1.5;
  font-size: 0.9rem;
}

.item-1 {
  max-height: 100%;
  width: auto;
  flex-basis: 25%;
  flex-grow: 0;
  max-width: 25%;
  background-color: lightblue;
}

.item-1-direct-child {
  min-height: 100%;
}

.side-image-bg {
  background-image: url('https://picsum.photos/200/300');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.item-2 {
  flex-basis: 75%;
  flex-grow: 0;
  max-width: 75%;
  background-color: orange;
}

.item-2-direct-child {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-top: 24px;
}

h4 {
  margin: 0px;
  margin-bottom: 20px;
}

.button-container {
  display: flex;
  justify-content: flex-end;
}

.button-container > a {
  text-decoration: none;
}

button {
  margin-top: 25px;
}
<div class="flex-container">
  <div class="item-1">
    <div class="item-1-direct-child side-image-bg">
    </div>
  </div>
  <div class="item-2">
    <div class="item-2-direct-child">
      <h4>Headline</h4>
      <span>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      </span>
      <div class="button-container">
        <a>
          <button>
          Button
          </button>
        </a>
      </div>
    </div>
  </div>
</div>

作为旁注，你有这样的代码：

<a>
  <button>
  Button
  </button>
</a>

它是链接中的一个按钮。这是无效的HTML，没有任何意义。交互式元素不能位于另一个交互式元素内部。<a>用于链接到另一个文档，<button>用于执行某些操作或提交表单。你需要选择哪一个需要在这里发生。

赞(0）分享  回复(0）举报  2023-10-21
tuwxkamq

tuwxkamq2#

我对CSS做了一些修改：修改了.item-1以创建一个容器来包含图像，并在.item-1-direct-child,height: 100%;中添加了flex以垂直拉伸其子对象。

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: purple;
  width: 100%;
  line-height: 1.5;
  font-size: 0.9rem;
}

.item-1 {
  width: 25%;
  flex-grow: 0;
  max-width: 25%;
  background-color: lightblue;
  position: relative;
  overflow: hidden;
}

.item-1-direct-child {
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  flex-direction: column;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 100%;
  min-width: 100%;
}

.item-2 {
  flex-basis: 75%;
  flex-grow: 0;
  max-width: 75%;
  background-color: orange;
}

.item-2-direct-child {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-top: 24px;
}

h4 {
  margin: 0px;
  margin-bottom: 20px;
}

.button-container {
  display: flex;
  justify-content: flex-end;
}

.button-container > a {
  text-decoration: none;
}

button {
  margin-top: 25px;
}
<div class="flex-container">
  <div class="item-1">
    <div class="item-1-direct-child">
      <img src="https://picsum.photos/200/300" />
    </div>
  </div>
  <div class="item-2">
    <div class="item-2-direct-child">
      <h4>Headline</h4>
      <span>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      </span>
      <div class="button-container">
        <a>
          <button>
          Button
          </button>
        </a>
      </div>
    </div>
  </div>
</div>
赞(0）分享  回复(0）举报  2023-10-21
a6b3iqyw

a6b3iqyw3#

  • 杀死物品中的height: 100%。
  • 将.item-1-direct-child { min-height: 100%; }更改为height: 100%
  • 将img { max-height: 100%; }更改为height: 100%

https://jsfiddle.net/dgrogan/sqfet3zj/

赞(0）分享  回复(0）举报  2023-10-21
mcvgt66p

mcvgt66p4#

你有很多不必要的百分比长度和其他代码。
此外，还不清楚您对所有这些max-width和max-height规则的目标是什么。
因此，为了保持简单，我只是简化了代码，并提供了一个解决问题的方法.
您可能需要进行修改以实现您的总体目标。
jsFiddle

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: purple;
  /* width: 100%; */
  line-height: 1.5;
  font-size: 0.9rem;
}

.item-1 {
  /* max-height: 100%; */
  /* width: auto; */
  /* flex-basis: 25%; */
  /* flex-grow: 0; */
  /* max-width: 25%; */
  background-color: lightblue;
  display: flex; /* sets align-items: stretch default */  
  flex: 0 0 25%; 
}

.item-1-direct-child {
  /* min-height: 100%; */
  display: flex; /* sets align-items: stretch default */
  flex: 1;
}

img {
  flex: 1;
  height: auto;
  object-fit: contain;
  /* max-height: 100%;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  min-height: 187px; */
}

.item-2 {
  /* flex-basis: 75%; */
  /* flex-grow: 0; */
  /*  max-width: 75%; */
  flex: 0 0 75%; /* NEW */
  background-color: orange;
}

.item-2-direct-child {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-top: 24px;
}

h4 {
  margin: 0px;
  margin-bottom: 20px;
}

.button-container {
  display: flex;
  justify-content: flex-end;
}

.button-container > a {
  text-decoration: none;
}

button {
  margin-top: 25px;
}
<div class="flex-container">
  <div class="item-1">
    <div class="item-1-direct-child">
      <img src="https://picsum.photos/200/300" />
    </div>
  </div>
  <div class="item-2">
    <div class="item-2-direct-child">
      <h4>Headline</h4>
      <span>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      </span>
      <div class="button-container">
        <a>
          <button>
          Button
          </button>
        </a>
      </div>
    </div>
  </div>
</div>
赞(0）分享  回复(0）举报  2023-10-21
oknwwptz

oknwwptz5#

设置高度为100vh

<img src="https://picsum.photos/200/300" height="100vh">
赞(0）分享  回复(0）举报  2023-10-21
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com