html - 需要图像高度

Question

我希望左侧背景的高度与右侧部分区域的高度相同。我尝试使用填充、高度以多种方式解决这个问题。但是当我调整屏幕大小时，它不会保持合适。

HTML:

<div class="s3-left col-sm-8">
    <a href="#"><img src="images/logo4.png" alt="logo" class="img-responsive center-block"/></a>
</div>

CSS:

.s3-left {
    background: url("images/background2.jpg") no-repeat 0 0 / 100% 100%;    
}
.s3-left img {
    width: 92px;
}

Answer 1

您可以使用 flex box 设置 display: flex 使两个区域的高度相等，并将 background: cover 设置为 .s3-left

.section-three .s3-left.col-sm-8 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.my-container{  /*added this class to div.row*/
  display: flex;    /*used to equal the height of both areas*/
}
.s3-left {
  background: url("http://lsst.astro.washington.edu/intro/imsim/images/ImageSimNoBackgroundSmall.png");
  background-size: cover;   /*using cover to fit all area*/
}
.s3-left img {
  width: 92px;
  padding: 199px 0;
}
.s3-image img {
  width: 100%;
}
.s3-logo {
  padding: 48px 0 25px;
}
.s3-heading h5 {
  margin: 0;
  padding: 0 0 10px;
}
.s3-description .gap {
  width: 80%;
  margin: auto;
}
.s3-description p {
  font-size: 12.4px;
  padding-bottom: 58px;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="section-three">
    <div class="container-fluid">
        <div class="row my-container">  <!--added the class my-container-->
            <!---------------------- Left-Area ------------------->
            <div class="s3-left col-sm-8">
                <a href="#"><img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" alt="logo" class="img-responsive center-block"/></a>
            </div>
            <!-----------------------Right-Area ------------------->
            <div class="s3-right col-sm-4">
                <div class="container-fluid">
                    <div class="s3-right-up row">
                        <div class="container-fluid">
                            <div class="s3-logo row">
                                <a href="#" target="_self">
                                    <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" alt="logo" class="img-responsive center-block" style="width:32px; height:auto;"/>
                                </a>
                            </div>
                            <div class="s3-heading row">
                                <h5 class="text-uppercase text-center"> Vintage oliva </h5>
                            </div>
                            <div class="s3-description row">
                                <div class="gap">
                                    <p class="text-justify">
                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="s3-right-down row">
                        <div class="container-fluid">
                            <div class="s3-image row">
                                <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" alt="logo" class="img-responsive"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

整页检查

Check this for more info about flexbox