的jsfiddle

您可以在JSFiddle中找到源here。

CSS

.container { 
  width: 100%;
  height: 350px;
  float: right;
}
.box {
  margin-top: -350px;
  float: right;
  width: 100%;
}
.box:first-child {
  margin-top: 0;
}
img {
    width: 50%;
    height: 350px;
    float:right;
}
.top-section {
    width: 50%;
    background-color: red;
    height: 175px;
}
.bottom-section {
    width: 50%;
    background-color: blue;
    height: 175px;
}

HTML

<div class="container">
    <div class="box">
            <img src="http://st.hzcdn.com/simgs/7d0137b70f7848d3_3-3892/modern-futons.jpg">
            <div class="top-section">
                some text.......
            </div>
            <div class="bottom-section">
                some other text.....
            </div>
    </div>
    <div class="box">
            <img src="http://i.ebayimg.com/00/s/MzAwWDMwMA==/z/JLYAAOSwxH1UBi1~/$_35.JPG?set_id=2">
            <div class="top-section">
                some text.......
            </div>
            <div class="bottom-section">
                some other text.....
            </div>
    </div>
</div>

我使用margin-top将两个div叠加在一起（div.box）。每个div.box分为3个部分：一个用于图片的部分，一个用于某些文本，另一个用于其他文本。

我正在尝试将div.top-section和div.bottom-section设为相同的高度，我的问题是：

我希望我的图片能够使用宽度响应：100％;高度：自动，但我想同时，每当用户调整窗口大小时，div.top-section和div.bottom-section都不会松动他们的与图片相关的高度。我的意思是我想要div.top-section和div.bottom-section，每个都有1/2图像高度并且使用％单位而不是像素。

我怎样才能做到这一点？提前谢谢。

Answer 1

你可以用绝对定位来做到这一点。您可以将容器中的所有容器放在相对位置，然后将所有内容放在绝对位置。然后给你的容器一个百分比的填充底部并用这个百分比玩，直到你得到你想要的高度。然后给你的文字部分绝对定位，高度为50％，你的图像高度为100％，宽度为50％，并将其定位在右边。

这可以通过两种方式之一实现。您可以使用绝对如此的图像和位置：

HTML：

<div class="container">
  <div class="text-1">
    Text 1
  </div>
  <div class="text-2">
    Text 2
  </div>
  <img  src="http://st.hzcdn.com/simgs/7d0137b70f7848d3_3-3892/modern-futons.jpg"/>
</div>

的CSS：

.container{
  position: relative;
  padding-bottom: 60%;
}
.text-1{
  position: absolute;
  left: 0;
  top: 0;
  height: 50%;
  width: 50%;
  background: red;
}
.text-2{
  position: absolute;
  left: 0;
  top: 50%;
  height: 50%;
  width: 50%;
  background: blue;
}
.container img{
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}

这是该方法Fiddle

的工作小提琴

接下来，如果您不想丢失图像的宽高比。假设您有一个高大的图像和一个短图像，并且您希望在您的页面上多次使用它。您可以在容器中放入另一个div并将其放置在右侧，并将图像作为此div的背景放置，如下所示：

Html：

<div class="container">
  <div class="text-1">
    Text 1
  </div>
  <div class="text-2">
    Text 2
  </div>
  <div class="image-section" style="background:url('http://st.hzcdn.com/simgs/7d0137b70f7848d3_3-3892/modern-futons.jpg')"></div>
</div>

的CSS：

.container{
  position: relative;
  padding-bottom: 60%;
}
.text-1{
  position: absolute;
  left: 0;
  top: 0;
  height: 50%;
  width: 50%;
  background: red;
}
.text-2{
  position: absolute;
  left: 0;
  top: 50%;
  height: 50%;
  width: 50%;
  background: blue;
}
.image-section{
  position: absolute;
  right: 0;
  top: 0;
  background-size:cover !Important;
  background-position:center !Important;
  backgroung-repeat:no-repeat !Important;
  height: 100%;
  width: 50%;
}

这是Fiddle

的工作小提琴

使用％单位和相对于图像高度的相等高度

的jsfiddle

CSS

HTML

1 个答案: