Question

我们有两列布局，其中图像在一侧，文本在另一侧。我们希望图像与内容的高度相同。当文本列达到某个高度时，我们遇到一个问题，那就是它不会使图像变高。尽管未添加，但此.flex__wrapper被外部<div class="container">元素包围，因此我们可以处理可能需要限制宽度的较大屏幕。

我们如何实现这一目标？我们当前的解决方案使用flexbox，但我们也尝试了以下解决方案，但没有一个解决问题。

目标：

随着包含文本的右列的高度增加，我希望图像也占据相同的高度。

我们尝试过的解决方案，但是没有用。它们似乎可以很好地处理文本和文本，但是不能处理文本和图像。

.flex__wrapper {
 display: flex;
 position: relative;
 align-items: center;
 background-color: #eee;
}

[class*=col--] {
 box-sizing: border-box;
}

.col--m-s-12 {
width: 100%;
}

.col--t-s-6 {
width: 50%; 
}

img {
display: block;
height: auto;
}

<div class="flex__wrapper">
  <div class="col--m-s-12 col--t-s-6">
    <img src="https://thumb1.shutterstock.com/display_pic_with_logo/422872/1024946740/stock-photo-large-group-of-business-people-standing-with-folded-hands-togeth-1024946740.jpg">
  </div>
  <div class="col--m-s-12 col--t-s-6">
    <div>Distinctively engineer timely benefits before leading-edge technology. </div>
    <div>Quickly brand strategic web-readiness whereas global relationships. Credibly underwhelm interdependent e-markets via plug-and-play value. Professionally maximize emerging partnerships rather than equity invested information. Objectively morph intuitive applications rather than multimedia based best practices. Competently innovate covalent infrastructures after premium relationships.

Globally conceptualize holistic sources and leveraged synergy. Distinctively maintain stand-alone content without market-driven niche markets. Completely orchestrate seamless channels after high-quality synergy. Rapidiously scale cutting-edge niche markets with reliable innovation. Intrinsicly productize multifunctional manufactured products without high standards in e-tailers.</div>
  </div>
</div>

当前问题：

其他问题：

所需结果：

Answer 1

html ：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test3</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<main class="holder">
  <section class="left-div">
    <h1 class="flat-invisible">test-3</h1> 
    <img src="https://thumb1.shutterstock.com/display_pic_with_logo/422872/1024946740/stock-photo-large-group-of-business-people-standing-with-folded-hands-togeth-1024946740.jpg" alt="stock photo large group of business people standing with folded hands together">
  </section>
  <aside class="right-div">
    <div>Distinctively engineer timely benefits before leading-edge technology. </div>
    <div>Quickly brand strategic web-readiness whereas global relationships. Credibly underwhelm interdependent e-markets via plug-and-play value. Professionally maximize emerging partnerships rather than equity invested information. Objectively morph intuitive applications rather than multimedia based best practices. Competently innovate covalent infrastructures after premium relationships.

Globally conceptualize holistic sources and leveraged synergy. Distinctively maintain stand-alone content without market-driven niche markets. Completely orchestrate seamless channels after high-quality synergy. Rapidiously scale cutting-edge niche markets with reliable innovation. Intrinsicly productize multifunctional manufactured products without high standards in e-tailers.</div>
  </aside>
</main>
</body>
</html>

css：

.left-div {
  float: left;
  grid-area: section;
  max-width: 100%;
  max-height: 100%;
}
 .flat-invisible {
  margin: 0em;  
  padding: 0em;
  line-height: 0em;
  height: 0em;
  visibility: hidden;
}
.left-div > img {
  object-fit: cover;
  top: 0px;
  height: 100%;
  max-width: 120%;
}
.right-div {
  padding-top: 2em;
  padding-bottom: 2em;
  padding-left: 150px;
  max-width: 50%;
  grid-area: aside;
  max-height: 100%;
}
.holder {
  max-width: 90%;
  background-color: #eee;
  display: grid;
  grid-template:
    'section aside';
}

Answer 2

您需要在图像上应用max-width：100％。现在，即使应用以下样式，您的图片也不会在全屏模式下占据整个位置（1600 * 900px），这是因为原始图片的尺寸较小（450 * 274），而您要容纳的容器为792px大约尝试使用更大的图像，它将解决。

.flex__wrapper {
  display: flex;
  position: relative;
  background-color: #eee;
  flex-wrap: wrap;
}
@media screen and (min-width: 1024px) {
  .flex__wrapper {
    max-width: 56%;
   }
}
[class*=col--] {
  box-sizing: border-box;
  flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.col--m-s-12 {
  width: 100%;
}

.col--t-s-6 {
  width: 50%;
}

img {
  height: 100%;
  width: 100%;
  object-fit:cover;
}

<div class="flex__wrapper">
  <div class="col--m-s-12 col--t-s-6" style="border:solid 1px;">
   <img src="https://thumb1.shutterstock.com/display_pic_with_logo/422872/1024946740/stock-photo-large-group-of-business-people-standing-with-folded-hands-togeth-1024946740.jpg" class="img-fluid">
  </div>
  <div class="col--m-s-12 col--t-s-6">
    <div>Distinctively engineer timely benefits before leading-edge technology. </div>
    <div>Quickly brand strategic web-readiness whereas global relationships. Credibly underwhelm interdependent e-markets via plug-and-play value. Professionally maximize emerging partnerships rather than equity invested information. Objectively morph intuitive
      applications rather than multimedia based best practices. Competently innovate covalent infrastructures after premium relationships. Globally conceptualize holistic sources and leveraged synergy. Distinctively maintain stand-alone content without
      market-driven niche markets. Completely orchestrate seamless channels after high-quality synergy. Rapidiously scale cutting-edge niche markets with reliable innovation. Intrinsicly productize multifunctional manufactured products without high standards
      in e-tailers.</div>
  </div>
</div>

Another issue if no width is added to wrapper on big screens

如何使两列的图像高度相同？

2 个答案: