html - 使用 % 单位和相对于图像高度的相等高度

Question

这是我的 fiddle :

JSFiddle

您可以找到来源 here在 JSFiddle 中。

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 具有相同的高度，我的问题是:

我希望我的图片使用 width:100%;height:auto 响应，但我同时希望，无论何时用户调整窗口大小时，div.top-section 和 div.bottom-section 都不会丢失它们与图片相关的高度。我的意思是我想要 div.top-section 和 div.bottom-section，每个都有 1/2 图像高度并使用 % 单位而不是像素。

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

Answer 1

您可以使用绝对定位来做到这一点。您可以将持有这一切的容器定位为相对的，然后将所有内部内容定位为绝对的。然后给你的容器一个百分比的 padding-bottom 并使用这个百分比直到你得到你想要的高度。然后为您的文本部分提供绝对定位和 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 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 的工作 fiddle