サイズはすべて小さくなりますが、ブラウザとモバイルには画像がありますか？ブートストラップ

Question

私は友人のウェブサイトをブートストラップで構築しようとしています。私はページのサイズを小さくすると（ビデオやテキストを含む）すべて縮小しますが、何らかの理由で私が使用しているロゴは縮小せずに後退しますブラウザのウィンドウが縮小されたときのビデオ、モバイルでは、ページの残りの部分と一緒に縮小するのではなく、フルサイズで表示されているため、全体のWebページが均衡していません。

これはブラウザウィンドウのフルスクリーンでデスクトップ上に表示されるように見える小さなスクリーンショットです - image これは、テキストとビデオボックスが縮小しているのを見るとブラウザウィンドウを縮小したときの動作です美しく、ロゴ...あまりそうではありません。 Image Screencap here

<section id="hero" data-type="background" data-speed="5"> 
     <article> 
      <div class="container clearfix"> 
       <div class="row"> 

        <div class="col-sm-6"> 
         <img src="assets/img/logo-badge.png" alt="Bootstrap to Wordpress" class="logo"> 
        </div><!-- col --> 

          <div class="col-sm-6 hero-text"> 

         <video width="100%" height="410" controls> 
    <source src="assets/img/Flanamation.mp4" type="video/mp4"> 
Your browser does not support the video tag. 
</video> 




     </article> 

    </section><!--hero--> 

すべてのヘルプや指導をいただければ幸いです！

Answer 1

.img-responsiveは通常ブートストラップで動作しますが、実際に言及されている他のコメントと同じように、私は現在のコンテナにイメージをラップしません。私自身は通常、ブートストラップを使ってロゴの中央に配置します。このような何か作品：

<section id="hero" data-type="background" data-speed="5"> 
 
    <article> 
 
    <div class="container clearfix"> 
 
     <div class="row"> 
 
     <div class="col-sm-12 col-md-6 col-lg-4"> 
 
      <img src="assets/img/logo-badge.png" alt="Bootstrap to Wordpress" class="logo"> 
 
     </div> 
 
     <!-- col --> 
 
     <div class="col-sm-6 hero-text"> 
 
      <video width="100%" height="410" controls> 
 
      <source src="assets/img/Flanamation.mp4" type="video/mp4"> 
 
      Your browser does not support the video tag. 
 
      </video> 
 
     </div> 
 
     </div> 
 
    </article> 
 
</section>

はまた、それはあなたが閉鎖されていなかったいくつかのコンテナを持っていたことは注目に値します。 HTMLを記述するときは、すべての要素が正しく機能するように閉じる必要があることを覚えておいてください。

私たちは本当にあなたがのために行く見てわからないが、私はこれが役に立てば幸いとして

Answer 2

与えるロゴクラスIMG応答

<img some code 
class="img-responsive"> 

その...正確に適切なソリューションを言ってタフブートストラップクラス

Answer 3

メディアクエリを使用する方が良いです。例えば、そこにあなたのCSSファイルで

@media only screen and (max-width: 750px) { 
.logo{ 
    height: 70px; 
} 
} 

使用この