Как обрезать картинку по размеру окна слайдера? bxslider

Рейтинг: 1Ответов: 1Опубликовано: 28.12.2014

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

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

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

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

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

css html вёрстка slider
Источник: Stack Overflow на русском

Ответы

▲ 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;