html - Boostrap 4 图像高度没有响应

Question

我在引导程序 4 中遇到了一个使图像高度响应的特定问题。我有一排有四列。第 2 列和第 3 列各占 5 列。第二列有一个图像，第三列是一个文本框。现在的问题是，第三列文本大小可以增长，如果文本在第三列中变得更多，我希望第二列图像高度响应等于第三列高度。我什至尝试过使用 bootstrap 4 中的 img-fluid，但它不起作用。这是我的示例代码。还有我到 jsfiddle JSFiddle Link的链接

  .meet-designer-tile{margin-top:80px;margin-bottom:40px;}
    
    .collection-details .btn-collection-details{
        border: none;
        border-radius: 0;
        padding: 15px 63px;
        color: #41173F !important;
        font-size: 14px;
        line-height: 20px !important;
        text-align: center;
        margin-top: 20px;
        text-decoration: none !important;
        border: 1px solid black;
        
    }
    
    .collection-details .btn-collection-details:hover {
    background-color: transparent !important;
    }
    
    
    
    .collection-details-spacing{
        margin-top:200px;
    }
    
    .designerTileShadow{
          box-shadow: 0 9px 20px 0 rgba(0,0,0,0.1);

    }
    
    .meet-designer-tile .content{
        padding: 0px 40px;
    }
    
    .meet-designer-tile .designerPhoto{
        padding-right: 0px;
    }
    
    .meet-designer-tile .content{
        padding: 0px 40px;
    }
    
    /* Responsive Tablet */
    @media(max-width:767px){
       
        .meet-designer-tile .designerPhoto{
            padding: 0px !important;
        }
        
        .meet-designer-tile .content{
            padding:20px 20px 30px 20px;
        }
    }
    
    


    

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row d-flex flexrow">
            <div class="col col-12 col-md-5 offset-md-1  designerPhoto">
                
                    <picture>     
                     <source media="(max-width:767px)" srcset="https://c8.alamy.com/comp/PNE9YE/milkmaid-and-dog-in-a-landscape-painting-watercolor-height-168-mm-661-in-width-200-mm-787-in-author-circle-of-edward-dayes-PNE9YE.jpg" class="lazy designerTileShadow img-fluid"/>
                      <img src="https://c8.alamy.com/comp/PNE9YE/milkmaid-and-dog-in-a-landscape-painting-watercolor-height-168-mm-661-in-width-200-mm-787-in-author-circle-of-edward-dayes-PNE9YE.jpg" srcset="https://c8.alamy.com/comp/PNE9YE/milkmaid-and-dog-in-a-landscape-painting-watercolor-height-168-mm-661-in-width-200-mm-787-in-author-circle-of-edward-dayes-PNE9YE.jpg 2x" class="stretch object-fit  designerTileShadow img-fluid"/>  
                    </picture>
            </div>
         
            <div class="d-md-flex col-12 col-md-5  mt-md-0 justify-content-center align-items-center designerTileShadow pl-0">
                    <div class="content text-left">
                        <h5>MEET THE DESIGNER</h5>
                        <h2>Ali Samar</h2>
                        <p class="body-font">I am a designer.I am a designer.I am a designer.
                        I am a designer.I am a designer.I am a designer.I am a designer.
                        I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
                        I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
                        I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
                        I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
                        I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
                        I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
                        I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.</p>
                    </div>
            </div>
         
         
            <div class="col col-12 col-md-1"></div>
                
     </div>
</div>

请帮忙。谢谢。蜜蜂

标签： htmlcssbootstrap-4

Answer 1

我希望这可以帮助你。对于移动版本，您可以使用媒体查询强制高度。

  .meet-designer-tile{margin-top:80px;margin-bottom:40px;}
    
    .collection-details .btn-collection-details{
        border: none;
        border-radius: 0;
        padding: 15px 63px;
        color: #41173F !important;
        font-size: 14px;
        line-height: 20px !important;
        text-align: center;
        margin-top: 20px;
        text-decoration: none !important;
        border: 1px solid black;
        
    }
    
    .collection-details .btn-collection-details:hover {
    background-color: transparent !important;
    }
    
    
    
    .collection-details-spacing{
        margin-top:200px;
    }
    
    .designerTileShadow{
          box-shadow: 0 9px 20px 0 rgba(0,0,0,0.1);

    }
    
    .meet-designer-tile .content{
        padding: 0px 40px;
    }
    
    .meet-designer-tile .designerPhoto{
        padding-right: 0px;
    }
    
    .meet-designer-tile .content{
        padding: 0px 40px;
    }
    
    /* Responsive Tablet */
    @media(max-width:767px){
       
        .meet-designer-tile .designerPhoto{
            padding: 0px !important;
        }
        
        .meet-designer-tile .content{
            padding:20px 20px 30px 20px;
        }
    }
    
    picture img {
      object-fit: cover;
  
    }
    
    picture {
      height: 100%;
    }
    


    

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row d-flex flexrow">
            <div class="col col-12 col-md-5 offset-md-1 d-flex designerPhoto">
                
                    <picture class="d-flex">     
                     <source media="(max-width:767px)" srcset="https://c8.alamy.com/comp/PNE9YE/milkmaid-and-dog-in-a-landscape-painting-watercolor-height-168-mm-661-in-width-200-mm-787-in-author-circle-of-edward-dayes-PNE9YE.jpg" class="lazy designerTileShadow img-fluid"/>
                      <img src="https://c8.alamy.com/comp/PNE9YE/milkmaid-and-dog-in-a-landscape-painting-watercolor-height-168-mm-661-in-width-200-mm-787-in-author-circle-of-edward-dayes-PNE9YE.jpg" srcset="https://c8.alamy.com/comp/PNE9YE/milkmaid-and-dog-in-a-landscape-painting-watercolor-height-168-mm-661-in-width-200-mm-787-in-author-circle-of-edward-dayes-PNE9YE.jpg 2x" class="stretch object-fit  designerTileShadow img-fluid"/>  
                    </picture>
            </div>
         
            <div class="d-md-flex col-12 col-md-5  mt-md-0 justify-content-center align-items-center designerTileShadow pl-0">
                    <div class="content text-left">
                        <h5>MEET THE DESIGNER</h5>
                        <h2>Ali Samar</h2>
                        <p class="body-font">I am a designer.I am a designer.I am a designer.
                  
                        I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
                        I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
                        I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
                        I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
                        I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
                        I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.</p>
                    </div>
            </div>
         
         
            <div class="col col-12 col-md-1"></div>
                
     </div>
</div>