Question

我有设计需要和图像和文本在div中彼此相邻（使用col-md-6）我需要高度图像调整大小文本div.on平板电脑和移动它有12列布局

这是我的HTML代码

<div class="row fixed-height">
                  <div class="col-md-6 full-screen-col img-head"></div><!--col for imag row ends here-->
                  <div class="col-md-6 cont-bg full-screen-col">
                    <div class="description_container">
                        <h1>JOIN OUR TEAM</h1>
                        <p>We except a lot from our team members, and we give a lot in return- like ongoing training, professional growth 
                        opportunities and competitive benefits. if Gaspar's sounds like your kind of workplace, we'd love to hear from you</p>
                    </div>
                  </div><!--container for text details-->
              </div><!--row fors slide container -->

这是使用的CSS。

.fixed-height{
    height: 300px;
    overflow-y: hidden;
}

.img-head{
    background-image: url(../images/Gaspars-Construction-Employee-Photo-1024x683.jpg);
    background-size: cover;
    height: 100%;
}

很少有人帮助我。提前致谢

Answer 1

这应该有效： HTML

<div class="row fixed-height">
     <div class="col-md-6 full-screen-col img-head">
          <img src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/308/308116-bigthumbnail.jpg"/>
     </div><!--col for imag row ends here-->
     <div class="col-md-6 cont-bg full-screen-col">
          <div class="description_container">
               <h1>JOIN OUR TEAM</h1>
               <p>We except a lot from our team members, and we give a lot in return- like ongoing training, professional growth opportunities and competitive benefits. if Gaspar's sounds like your kind of workplace, we'd love to hear from you</p>
          </div>
     </div><!--container for text details-->
</div><!--row fors slide container -->

CSS

.img-head{
  float: left;
}

Answer 2

添加此内容，

{{1}}

使用旁边的文本div调整Image Div的大小

2 个答案: