响应内容与图像高度匹配
响应内容与图像高度匹配
提问于 2017-03-05 10:35:25
这一页分成两个部分。响应图像放在左边，我的内容放在右边。我只想设置内容部分的高度将是相同的图像高度在任何分辨率。(不是在移动版本)，但现在看起来是这样的。我试着用这个代码。
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>
回答 4
Stack Overflow用户
发布于 2017-03-05 10:46:22
你的目标是让背景保持灰色吗？如果是这样的话，有一种非常简单的方法:将background: #efefef;迁移到.row。或者，如果您需要更具体(例如，如果页面上有.row的其他实例)，只需向<div class="row">元素添加一个额外的类，并对其应用该background属性。
Stack Overflow用户
发布于 2017-03-05 10:56:20
尝试向内容添加padding-bottom，然后可能更改单词的字体大小。我不知道它是否有效，因为我没有你的形象，但我认为你应该试试。希望你能找到你要找的东西。
Stack Overflow用户
发布于 2017-03-05 11:07:34
只需在列中添加负边距即可。列的高度将变得相同。
.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方法，但这会破坏页面的响应性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42603824
复制相关文章
相似问题
腾讯云开发者
