2017-03-05 9 views
1

ページは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>

enter image description here

+2

あなたのhtml – mlegg

+0

質問 – Janath

答えて

0

背景がそのグレー色を保持するために持っているあなたの目標ですか?もしそうなら、かなり簡単な方法があります:background: #efefef;.rowに移動してください。または、より具体性が必要な場合(たとえば、ページに.rowという別のインスタンスがある場合)、<div class="row">要素に余分なクラスを追加し、それにbackgroundプロパティを適用します。

+0

に更新されますが、どのように私はイメージで私のコンテンツを中央にすることができますか? – Janath

0

padding-bottomをコンテンツに追加してから、単語のフォントサイズを変更してください。私はあなたのイメージを持っていないので、それが動作するかどうかわからないが、あなたはそれを試してみるべきだと思う。私はあなたが探しているものを見つけることを願っています。

0

列に負のマージンを追加するだけで列の高さが同じになります。

.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"> 
 
\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>

ノート

あなたはフレキシボックスのアプローチを使用することができますが、それはあなたのページの応答性を中断します。

Refer to this question

0

イメージはこの応答性の方法では動作しませんので、あなたは、背景画像を使用した方がいいでしょう。イメージ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

関連する問題