文章/答案/技术大牛

发布

社区首页 >问答首页 >如何用image保持两列的高度一致？

问如何用image保持两列的高度一致？
EN

Stack Overflow用户

提问于 2018-07-31 06:52:44

回答 2查看 2.9K关注 0票数 1

我们有一个两列的布局，其中图像在一边，文本在另一边。我们希望图像的高度与内容相同。我们遇到了一个问题，当文本列达到一定的高度时，它将不会使图像变得完全高度。虽然没有添加，但这个.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>

当前问题：

其他问题：

期望的结果：

html

css

flexbox

css-tables

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-31 13:21:41

你需要在你的图像上应用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>

票数 2

Stack Overflow用户

发布于 2018-07-31 09:09:48

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';
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51603309

复制

相似问题

问如何用image保持两列的高度一致？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用image保持两列的高度一致？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用image保持两列的高度一致？
EN