响应内容与图像高度匹配
响应内容与图像高度匹配
提问于 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>
Stack Overflow用户
发布于 2017-03-05 10:56:20
尝试向内容添加padding-bottom，然后可能更改单词的字体大小。我不知道它是否有效，因为我没有你的形象，但我认为你应该试试。希望你能找到你要找的东西。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42603824
复制相关文章
相似问题
腾讯云开发者
