代码之家 › 专栏 › 技术社区 › usernameabc

如何使两列的高度与图像保持一致?

css-tables flexbox css html

usernameabc · 技术社区 · 6 年前

我们有两列布局,其中图像在一边,文本在另一边。我们希望图像与内容高度相同。当文本列达到某个高度时,我们会遇到一个问题,这样就不会使图像变为全高。虽然没有添加,但这个 .flex_uuu wrapper 被一个外部的 <div class=“container”> 元素包围,这样我们就可以在需要限制宽度的地方处理更大的屏幕。


   
    
     我们如何才能做到这一点?我们当前的解决方案使用了
     
      flexbox
      
       ,但我们也尝试了以下解决方案,但没有一个解决了问题。
      
     
    
    
     
      
       目标:
      
      
       
        当包含文本的右列的高度增加时,我希望图像也占用相同的高度。
       
      
      
       我们尝试过的解决方案,但没有起作用。它们似乎可以很好地处理文本和文本,但不能处理文本和图像。
      
      
      
      
       
        
         make two columns the same height(using flexbox)>
        
       
       
        
         keep columns with same height
(使用表格)
        
       
      
      
      
      
       
        .flex_uuu wrapper{
显示:Flex;
职位:相对;
项目对齐:居中;
背景色:
}

[类别*=列--]{
框大小:边框框;
}

CO-M-S-12{
宽度:100%;
}

CO-T-T-6{
宽度:50%;
}

IMG{
显示:块;
高度:自动;
}<代码> < /PRE>
<DIV class=“col--m-s-12 col--t-s-6”>
<img src=“https://thumb1.shutterstock.com/display_pic_with_logo/422872/10249446740/stock-photo-large-group-of-business-people-standing-with-fold-hands-togeth-1024946740.jpg”>
&L/DIV & GT;
<DIV class=“col--m-s-12 col--t-s-6”>
<DIV>在领先的技术之前,能够及时为客户带来好处。&L/DIV & GT;
<DIV>快速品牌战略网络准备,而全球关系。通过即插即用价值可靠地低估了相互依赖的电子市场。专业地最大化新兴合作伙伴关系,而不是股权投资信息。客观地改变直观的应用程序,而不是基于多媒体的最佳实践。在建立优质关系后,积极创新共价基础设施。

全球概念化整体资源和杠杆协同。独特地维护独立内容,无需市场驱动的利基市场。在高质量的协同作用后,完全协调无缝通道。以可靠的创新快速扩展前沿利基市场。内部生产无高标准的多功能电子零售商产品。</Div>
&L/DIV & GT;
</DIV>>=
       
      
      
       当前问题:
       
        
       
      
      
       附加问题:
       
        
       
      
     
     
      
       预期结果:
       
        
        .
       
       
        
         .flex__wrapper
        
       
      
      
       被外部包围
       
        <div class="container">
       
       元素,以便在需要限制宽度的地方处理较大的屏幕。
      
     
     
      
       我们如何才能做到这一点?我们当前的解决方案使用
       
        flexbox
       
       ,但我们也尝试了以下解决方案,但没有解决问题。
      
      
       目标:
      
      
       
        当包含文本的右列的高度增加时,我希望图像也占用相同的高度。
       
      
      
       我们尝试过的解决方案,但没有起作用。它们似乎可以很好地处理文本和文本,但不能处理文本和图像。
      
     
     
      
      
      
       
       
       
        Make two columns the same height (using Flexbox)
       
      
      
       
        Keep columns with same height
(using Tables)
       
      
     
     
     
     
      
       .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>
      
     
     
      当前问题:
      
       
      
     
     
     
     
      附加问题:
      
       
      
     
     
     
     
      期望结果:

2 回复 | 直到 6 年前

Charu Maheshwari 6 年前

您需要在图像上应用最大宽度:100%。现在,即使应用了以下样式,您的图像也不会在全屏(1600*900px)中完全显示出来,这是因为您的原始图像的尺寸较小(450*274),并且您尝试适应的容器大约为792px。请尝试使用较大的图像,然后它就会得到解决。

.flex_uuu wrapper{
显示:Flex;
职位:相对;
背景色:
柔性包装:包装;
}
@媒体屏幕和(最小宽度:1024px){
.flex_uuu包装{
最大宽度:56%;
}
}
[类别*=列--]{
框大小:边框框;
柔性基:0;
弯曲生长:1;
最大宽度:100%;
}

CO-M-S-12{
宽度:100%;
}

CO-T-T-6{
宽度:50%;
}

IMG{
身高:100%;
宽度:100%;
对象匹配:覆盖;
}<代码> < /PRE>
<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/10249446740/stock-photo-large-group-of-business-people-standing-with-fold-hands-togeth-10249446740.jpg”class=“img fluid”>
&L/DIV & GT;
<DIV class=“col--m-s-12 col--t-s-6”>
<DIV>在领先的技术之前,能够及时为客户带来好处。&L/DIV & GT;
<DIV>快速品牌战略网络准备,而全球关系。通过即插即用价值可靠地低估了相互依赖的电子市场。专业地最大化新兴合作伙伴关系,而不是股权投资信息。客观的变形直觉
应用程序而不是基于多媒体的最佳实践。在建立优质关系后,积极创新共价基础设施。全球概念化整体资源和杠杆协同。独特地维护独立内容
市场驱动的利基市场。在高质量的协同作用后,完全协调无缝通道。以可靠的创新快速扩展前沿利基市场。内部生产无高标准的多功能产品
电子零售商。</Div>
&L/DIV & GT;
</DIV>>=

我们的原始图像尺寸较小(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

Stef 6 年前

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