html - 如何在桌面 View 中左对齐图像并在移动 View 中将其居中？

Question

我有一个网站:http://www.mammothnewyork.com/主要由画廊组成。

我有一些纵向格式的图像(例如，如果您向下滚动到“Andela”画廊)。

在桌面上:

我希望它们在桌面上左对齐。即左侧有图像，右侧有黑色。您可以在我的测试服务器上查看“Andela”部分 http://45.55.217.186/ .然而，这种方法在移动设备上变得一团糟。

在手机上:

我希望它们居中。就像在当前网站上一样，http://www.mammothnewyork.com/ .但是，这种方法不会在桌面上将它们左对齐。

我在 Photoshop 中手动将上述两个站点上的图像放在黑色上以演示我的要求。否则原始图像本身就是没有黑色背景的。

我已经修改过:背景:url(img/andela/Andela-01.jpg) no-repeat center center;使用 no-repeat left center 但它不能解决我在桌面和移动设备上的问题。

我当前用于 Andela 的 Flexbox slider 和该图像的 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