Question

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

我有一些纵向格式的图像（例如，如果向下滚动到“Andela”图库）。

在桌面上：

我希望它们在桌面上左对齐。即左侧有图像，右侧有黑色。您可以在我的测试服务器http://45.55.217.186/上查看“Andela”部分。但是，这种方法在移动设备上搞砸了。

在手机上：

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

上面提到的两个网站上的图片都是我在Photoshop中手动放置在黑色上，以展示我的要求。否则原始图像本身就是没有黑色背景。

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

我目前用于Andela的Flexbox滑块的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

如何在桌面视图中保持对齐图像并将其置于移动视图中？

1 个答案: