1

Здравствуйте!

Не подскажите, как сделать так, чтобы bxslider картинку не ресайзил под размер отображаемой области, а просто обрезал ее и центрировал посередине?

Т.е. если картинка больше, чем viewport слайдера, то она просто режется и центрируется, и можно так листать!

Т.е. bx-viewport 600x300, а картинка 900x450, как сделать так, чтобы именно и отображалась только область в 600x300, от всего размера картинки?

Заранее благодарен за помощь!

1 ответ 1

3

Если у вас фиксированный "вьюпорт", можно реализовать вот так:

<div class="slider-place">
    <ul class="my-slider">
        <li style="background-image:url('/url/to/image.jpg');"></li>
        <li style="background-image:url('/url/to/image.jpg');"></li>
        <li style="background-image:url('/url/to/image.jpg');"></li>
    </ul>
</div>

Накидал пример: http://jsfiddle.net/L2bqmptc/2/

Также если нужно "вписать" картинку, то это делается одной строчкой:

background-size: cover;

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.