响应内容与图像高度匹配

Question

该页面分为两部分。左侧的响应式图像和我的内容右侧。我只想设置内容部分的高度将与任何分辨率下的图像高度相同。 （不是移动版）但是现在它看起来像这样。 我试过这个代码。

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>

Answer 1

你的目标是让背景保持灰色吗？如果是这样，那么可以采用一种非常简单的方法：将background: #efefef;移至.row。或者，如果您需要更高的特异性（例如，如果页面上有其他.row实例），只需向<div class="row">元素添加一个额外的类，并将background属性应用于该元素。

Answer 2

尝试在您的内容中添加padding-bottom，然后可能更改字词的字体大小。我不知道它是否会起作用，因为我没有你的形象，但我认为你应该尝试一下。我希望你找到你想要的东西。

Answer 3

只需在列中添加负边距..列高将变为相同。

.row{
overflow: hidden; 
  }


 [class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
 }

工作示例

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

注意

您可以使用flexbox方法，但这会破坏您网页的响应能力。

Refer to this question

Answer 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