ページは2つのセクションに分割されます。左側の反応イメージと私のコンテンツは右側に行きます。私はちょうどコンテンツセクションの高さを任意の解像度での画像の高さと同じに設定したいと思う。 (モバイル版ではない)しかし、今のところ、このように見えます。 私はこのコードを試しました。画像の高さに合った反応的な内容
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">
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-6 nopadding">
\t \t \t \t \t <img src="https://c.tadst.com/gfx/750x500/computer-key-about-help.jpg?1" alt="">
\t \t \t \t </div>
\t \t \t \t <div class="col-md-6 about-section nopadding">
\t \t \t \t \t <div class="about-content">
\t \t \t \t \t \t <div class="inner">
\t \t \t \t \t \t \t <h3>WE BREATHE WEB TECHNOLOGY</h3>
\t \t \t \t \t \t \t <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>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
あなたのhtml – mlegg
質問 – Janath