【问题标题】：Responsive content match to image height响应式内容匹配图像高度
【发布时间】：2017-03-06 07:43:19
【问题描述】：
该页面分为两个部分。左侧是响应式图像，我的内容位于右侧。我只想将内容部分的高度设置为与任何分辨率下的图像高度相同。 （不在移动版本中）但现在看起来像这样。
我试过这个代码。
img {
width:100%;
}
.about-section {
height: 450px;
}
.about-content {
padding: 60px;
height: 100%;
display: table;
background: #efefef;
}
.inner {
display: table-cell;
vertical-align: middle;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 nopadding">
<img src="https://c.tadst.com/gfx/750x500/computer-key-about-help.jpg?1" alt="">
</div>
<div class="col-md-6 about-section nopadding">
<div class="about-content">
<div class="inner">
<h3>WE BREATHE WEB TECHNOLOGY</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada</p>
</div>
</div>
</div>
</div>
</div>
【问题讨论】：
标签：
html
css
twitter-bootstrap
【解决方案1】：
您的目标是让背景保留那种灰色吗？如果是这样，有一个非常简单的方法：将background: #efefef; 移动到.row。或者，如果您需要更高的特异性（例如，如果您在页面上有其他 .row 实例），只需向 <div class="row"> 元素添加一个额外的类，并将该 background 属性应用于它。
【解决方案2】：
尝试在您的内容中添加padding-bottom，然后可能更改您的文字的字体大小。我不知道它是否会起作用，因为我没有你的形象，但我认为你应该尝试一下。我希望你能找到你要找的东西。
【解决方案3】：
只需为您的列添加负边距.. 列高将变得相同。
.row{
overflow: hidden;
}
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
工作示例
img {
width:100%;
}
.about-section {
height: 450px;
}
.about-content {
padding: 60px;
height: 100%;
display: table;
background: #efefef;
}
.inner {
display: table-cell;
vertical-align: middle;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.row{
overflow: hidden;
}
[class*="col-md-6"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 nopadding">
<img src="https://c.tadst.com/gfx/750x500/computer-key-about-help.jpg?1" alt="">
</div>
<div class="col-md-6 about-section nopadding">
<div class="about-content">
<div class="inner">
<h3>WE BREATHE WEB TECHNOLOGY</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada</p>
</div>
</div>
</div>
</div>
</div>
注意
您可以使用 flexbox 方法，但这会破坏页面的响应能力。
Refer to this question
【解决方案4】：
图像不能以这种响应方式工作，因此最好使用背景图像。在图像 div 上设置最小高度，以便它仍然出现在小屏幕上。使用flexbox 使行高度相同。
演示：http://www.codeply.com/go/iBjwmWLmWT
.img {
background-image:url(https://c.tadst.com/gfx/750x500/computer-key-about-help.jpg?1);
background-size: cover;
background-repeat: no-repeat;
min-height: 270px;
}
.about-section {
background: #efefef;
}
.about-content {
padding: 15px;
}
@media (min-width: 992px) {
.row {
display: flex;
}
}
演示：http://www.codeply.com/go/iBjwmWLmWT