Блог

Главная - Вопросы по программированию - Как мне выровнять изображение по левому краю в режиме рабочего стола и центрировать его в режиме мобильного просмотра?

Как мне выровнять изображение по левому краю в режиме рабочего стола и центрировать его в режиме мобильного просмотра?

#html #css #slider #flexbox

#HTML #css #ползунок #flexbox

Вопрос:

У меня есть сайт: http://www.mammothnewyork.com / который в основном состоит из галерей.

У меня есть несколько изображений в портретном формате (например, если вы прокрутите вниз до галереи «Andela»).

На рабочем столе:

Я хочу, чтобы они были выровнены по левому краю на рабочем столе. т.Е. Изображение слева и черное справа. Вы можете взглянуть на раздел «Andela», как он отображается на моем тестовом сервере здесь http://45.55.217.186 / . Однако этот подход испорчен на мобильных устройствах.

На мобильном:

Я хочу, чтобы они были центрированы. Как и на текущем сайте, http://www.mammothnewyork.com /. Однако этот подход не выравнивает их по левому краю на рабочем столе.

Изображения на обоих упомянутых выше сайтах были размещены мной в Photoshop вручную, чтобы продемонстрировать то, что я прошу. В противном случае само исходное изображение было бы просто без черного фона.

Я повозился с: background: url(img/andela/Andela-01.jpg) no-repeat center center; для использования no-repeat left center , но это не решает мою проблему как для настольных, так и для мобильных устройств.

Мой текущий CSS для слайдера Flexbox для Andela и этого изображения:

     <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 arrowsamp;nbsp;below.</p> -->

        </div>

    </section>

Комментарии:

1. Как вы собираетесь отделить рабочий стол от мобильного?

2. Как показано в приведенном ниже ответе, вы должны использовать медиа-запросы CSS при настройке стилей для разных размеров экрана. Сначала вам нужно будет найти размер экрана, который отличается между мобильным и настольным

Ответ №1:

Вы можете сделать что-то вроде этого:

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

Для получения дополнительной информации проверьте http://www.w3schools.com/css/css_rwd_mediaqueries.asp