コンテナ流体を使用したカラムのオーバーラップブートストラップ

Question

半ページイメージと他のハーフテキストがあるウェブページを構築しようとしています。

これまでのところ、これは私が持っているものです。私はそれを働かせています。私がページを縮小すると、テキストが写真と重なってしまいます。

の.cssファイル：

.z-img{ 
padding: 0 0 10px 0; 
border: none; 
border-radius: 0; 
position: fixed; 
} 
.z-content { 
padding: 70px 0 10px 0; 
color: #c0d1ca 
} 

htmlファイル：

<div class="container-fluid"> 
<div class="row"> 
    <div class="span6"> 
     <div class="z-img"> 
      <img src="...." width="732" height="432"> 
    </div> 
</div> 
    <div class="span6 text-center"> 
     <div class="z-content"> 
      <div class="well"> 
       <h2> About Me: </h2> 
      </div> 
      <div> 
       <blockquote> 
        <p>............</p> 
       </blockquote> 
      </div> 
     </div> 
    </div> 
    </div> 

私はページを縮小モバイルに言うことができますとき、私はテキストが画像を重ねたくないことを確認します。静的なサイズではなく、画面のサイズに合わせて画像を縮小して拡大することも可能ですか？

Answer 1

私はそれを理解しただけで、写真タグにclass = "img-responsive"タグを追加するだけでした。