img не подходит для мобильного устройства - PullRequest
Новая
       0

img не подходит для мобильного устройства

0 голосов
/ 14 ноября 2018

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

HTML: 

<div data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1"class="sl-slide">
    <div style="background-image: url(images/slide/3.jpg);"class="sl-slide-inner">
        <div class="slide-container">
            <div class="slide-content text-center">
                <h2 class="main-title"><span class="text-primary">Tractari auto intern & international</span></h2>
                <blockquote>
                    <p ></p>
                    <p style="margin-top: 0px"></p>
                </blockquote>
            </div>
        </div>
    </div>
</div>

CSS 

.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner {
background-repeat: no-repeat;
background-size: contain;
background-position:center;
}

Я хочу видеть это на своем телефоне, полное изображение:

https://gyazo.com/4b3726e24444038f2e6ff824a9f3ec45

не это

https://gyazo.com/f263a347517120a0ad368b7bbd2840ae

заранее спасибо

1 Ответ

0 голосов
/ 14 ноября 2018

Итак, у вас есть несколько вариантов, но вы должны знать о некоторых ограничениях:

Изображение будет либо шириной экрана (и, вероятно, значительно короче, чем хотелось бы), либо высотой вашего контейнера (и намного шире, чем экран).

Чтобы получить первый результат (ширина 100%, любая высота): 

.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position:center;
}

И для того, чтобы получить второй (который вы уже получаете): 

    .demo-1 .sl-slide .sl-slide-inner,
    .demo-2 .sl-slide .sl-slide-inner {
        background-repeat: no-repeat;
        background-size: contain OR [auto 100%];
        background-position:center;
    }

Но, если не манипулировать / не изменять изображение в зависимости от размера экрана с помощью javascript, контроля не намного больше, чем это.

...