Question

我已经在bootstrap中创建了一个网站，但在两个列上遇到了高度问题。在联系页面上，地图下方有两列。左边是一个图像，右边是一些文字，如果有人可以帮助我得到它，那么他们会喜欢它，所以他们在相同的高度做出反应。因此左右列在捕捉到全宽之前以相同的方式调整大小。

http://reraisedesign.com/contact-us.php

<div class="container-fluid" style="padding: 0; background: #fff;">

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 con-img">
                <img src="img/contact-us.jpg" width="100%"/>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 con-blurb">
                <div class="row">
                    <div class="col-xs-10 col-xs-offset-1">
                        <h1>Say Hello</h1>
                        <span class="line-left"></span>
                       <p>We would like to just thank you for taking the time to visit our site, if you would like hear more about ReRaise feel free to give us a call or drop us an email. We would love to hear about any potential projects or queries you may have and will always aim to respond the same day.</p>
                       <p class="con-dets">0151 705 3414</br>
                      <a href="mailto:info@reraisedesign.com?Subject=Hey%20ReRaise">Send us an Email</a></p>

                   </div>
                </div>

                    </div>


         </div>

这是HTML附带的CSS

.con-blurb{
padding-top:100px;
padding-bottom:100px;
}

.con-img{
size:cover;
-webkit-size: cover;
-moz-size: cover;
-o-size: cover;
height: 100%;
}


.con-blurb h1{
text-align: left;
}

Answer 1

试试这段代码：

.con-img img{
    height: 100%;
    max-width: 100%;
    width: auto;
}

Answer 2

将.con-img类中的上边距属性设置为margin-top：27px并设置div包括“say hello”margin-top：-106px

//code

.con-img{
margin-top:27px;
}

//div incluing say hello

.div{
margin-top:-106px;
}

Answer 3

找到一个没有扭曲的解决方案：

.con-blurb{
   padding-top:100px;
}

.con-img img{
   display: block;
   max-width: 100vw;
   background-size: cover;
   height: 50vh;
   object-fit: cover;
 }

Bootstrap图像列高度问题

3 个答案: