Question

我有一个div在文本和图像之间分割50％。我希望右边的图像始终与文本的高度相同，我今天早上已经关注了很多帖子，但似乎无法让它发挥作用。

您可以在此处查看该页面的示例： http://pagedev.co.uk/bowmite/test/electrical.html

我想我几乎就在那里，你可以看到显示div基础的橙色背景......图像只需要适应这个并且需要溢出......

我的HTML是：

<div class="split-wrapper">
                        <div class="split-left">
                            <p>Our focus is quality, pure and simple. We strive to retain our high standards and reputation whilst learning from each successful high quality installation. Implementating control procedures within an ever changing market place has been key to our success.</p>
                            <p>You will find our site teams are efficiently supervised with high levels of management availability and client liaison. We enjoy long term relationships with many of our clients, thanks to our comprehensive understanding of quality.</p>
                        </div>

                        <div class="split-right">
                            <img class="right-align-image" src="images/electrical-bottom.jpg">
                        </div>
                    </div>

我的Css是：

.split-wrapper  {
    width:100%;
    height:auto;
    background-color:#ff6600;
    margin-bottom:20px;
    display:inline-block;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -khtml-border-radius: 4px;
}

.split-left {
    width:40%;
    height:100%;
    padding-right:5%;
    padding-left:5%;
    padding-top:25px;
    padding-bottom:15px;
    display:inline-block;
    float:left;

    background-color:#ffffff;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 4px;

    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 4px;
}

.split-right    {
    width:50%;
    height:auto;
    float:left;
    background-color:#ffffff;
    overflow:hidden;

    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 0px;

    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 0px;
}

.split-right img    {
    width:;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 0px;

    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 0px;
}

Answer 1

第一个解决方案是告诉您想要的宽度......如果您打算使用媒体查询，您可以说：对于此分辨率，我希望此图像具有此宽度和此高度。

另一个解决方案是像背景一样使用图像，并通过css告诉所有容器：

.split-wrapper {
width: 100%;
height: auto;
background: url('../images/electrical-bottom.jpg');
background-size: cover;
margin-bottom: 20px;
display: inline-block;
border-radius: 4px;

}

问题在于照片可能不是您想要的。

尝试使用background-size properties。

Answer 2

您可以使用以下jQuery代码来实现您的目标：

$( document ).ready(function() {
  $('.split-right img').height($('.split-left').outerHeight());
});

split-left div的高度为393px，其中包含所有文本，包括边框，上面的jQuery代码将高度分配给图像。即使您更改split-left div。

内的文本长度，这也会有效

其次，您需要将以下CSS添加到样式表中：

.split-right img {
     width: //100% or auto;
}

您需要在100%或auto之间为图片的width进行选择。如果选择100%，图像将显示为压扁，如果选择auto，则只能看到图像的一小部分。

但是如果你坚持使用CSS，那么你可以做的是你可以从split-right div中删除图像，而是将background-image用作.split-wrapper .split-wrapper { background-image: url(http://pagedev.co.uk/bowmite/test/images/electrical-bottom.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }像这样的div：

{{1}}

Answer 3

我会为分割列使用CSS表格布局，为右侧使用背景图像。

对CSS tables和CSS3 background-size的支持相当不错，合乎逻辑且易于使用。此外，它自然灵活（响应），并且当视口太小而无法进行拆分布局时，可以使用媒体查询轻松更改。

.split {
    display:table;
    background:#fff;
    border-radius:5px;
    overflow:hidden;
    margin:50px;
}
.split .col {
    display:table-cell;
    width:50%; padding:30px;
}
.split .imgbg {
    background: url(http://pagedev.co.uk/bowmite/test/images/electrical-bottom.jpg) no-repeat center center fixed; 
    background-size: cover;
}
@media only screen and (max-width: 480px) {
    .split {
        display:block;
    }
    .split .col {
        display:block;
        width:auto;
    }
    .split .imgbg {
        height:100px;
    }
}

演示：http://jsfiddle.net/fc4coukr/
（确保你调整它的大小）

响应式Div中的全高图像分割50％

3 个答案: