デスクトップビューでイメージを整列させたまま、モバイルビューで中央に配置するにはどうすればよいですか？

Question

私はサイトがあります：http://www.mammothnewyork.com/はほとんどがギャラリーで構成されています。

私はいくつかの画像をポートレート形式にしています（たとえば、「Andela」ギャラリーまでスクロールすると）。デスクトップで

：

は、私は彼らがデスクトップ上に左揃えになりたいです。すなわち、左側に画像を有し、右側に黒を有する。私のテストサーバーに表示されているように、ここでは "Andela"セクションをご覧になれますhttp://45.55.217.186/。しかし、このアプローチはモバイルでうんざりしてしまいます。モバイルで

：

私は彼らが中心になりたいです。現在のサイトのように、http://www.mammothnewyork.com/。しかし、このアプローチはデスクトップ上でそれらを左揃えにしません。

上記の両方のサイトの画像は、私が尋ねていることを実証するために、Photoshopで私の手で黒く配置されています。さもなければ、元の画像自体は黒の背景なしであるに過ぎない。

私は周りに手を加えています：no-repeat left centerを使用する background: url(img/andela/Andela-01.jpg) no-repeat center center; が、それは、デスクトップとモバイルの両方のための私の問題を解決していません。 Andelaためのフレキシボックススライダとそのイメージの

私の現在のCSSは次のとおりです。

<section id="andela" class="gallery section wait"> 

     <div class="container"> 
      <h2 class="title lighttext">Andela</h2> 
     </div> 

     <div id="galleryandela" class="slides-wrap fill"> 
      <div class="slides"> 

       <div class="slide"> 
        <span class="img" style="background: url(img/andela/Andela-01.jpg) no-repeat center center; background-size: cover;"></span> 
        <p class="lighttext" style="top:4%;"></p> 
       </div> 

       .... 
       .... 
       .... <!-- TRUNCATED HTML FOR OTHER DIVS --> 
       .... 
       .... 

       <!-- slide last --> 
       <div class="slide last"> 
        <span class="img" style="background: url(img/andela/Andela-20.jpg) no-repeat center center; background-size: cover;"></span> 
        <!-- <p class="addbg" style="top:72%;"></p> --> 
       </div> 

      </div> 

      <nav class="pager"> 
      </nav> 

      <!-- <p class="pager-txt">Explore more using the boxes above or the arrows&nbsp;below.</p> --> 

     </div> 

    </section> 

Answer 1

あなたはこのような何か行うことができます。詳細については

@media only screen and (max-device-width: 736px) { 
    . img { 
    margin:0 auto !important; 
} 

をhttp://www.w3schools.com/css/css_rwd_mediaqueries.asp