Возможно где-то еще заданы стили для responsive img, поэтому можно добавить img { width: auto; }
:
.column {
width: 220px;
}
img {
width: auto;
max-width: inherit;
}
<div class="column">
<div class="slider">
<div><img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png"></div>
</div>
</div>
P.S: Возможно, что у .column
задан overflow: hidden;
и изображение просто обрезается из-за этого, но это как предположение.
Update:
Вообщем проблема в .column { width: 220px; } Для чего Вы задаете такие размеры, если хотите, чтобы внутри находился слайдер с картинками в 850px?! Не совсем понятно.
$(".slider").slick({
slidesToShow: 1,
arrows: false
});
.column {
width: 220px;
}
.column img {
width: auto;
max-width: inherit;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<div class="column">
<div class="slider">
<div>
<img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt="">
</div>
<div>
<img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt="">
</div>
<div>
<img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt="">
</div>
</div>
</div>
Если нужна фиксированная ширина картинок в слайдере и именно в 850px, то стоит задать такую ширину и самому слайдеру:
$(".slider").slick({
slidesToShow: 1,
arrows: false
});
.column {
width: 220px;
}
.slider {
width: 850px;
}
.column img {
width: auto;
max-width: inherit;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<div class="column">
<div class="slider">
<div>
<img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt="">
</div>
<div>
<img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt="">
</div>
<div>
<img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt="">
</div>
</div>
</div>
А вот если хотите, что бы ширина все-таки была 220px и слайдер вмещался в эту ширину, то все-таки лучше адаптировать и картинки под эту ширину:
$(".slider").slick({
slidesToShow: 1,
arrows: false
});
.column {
width: 220px;
}
.column img {
width: 100%;
max-width: 100%;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<div class="column">
<div class="slider">
<div>
<img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt="">
</div>
<div>
<img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt="">
</div>
<div>
<img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt="">
</div>
</div>
</div>
P.S: есть еще вариант - убрать ширину .column {width: 220px; }
и отображать слайдер с изображениями тех размеров какие есть (variableWidth: true
):
$(".slider").slick({
slidesToShow: 1,
arrows: false,
variableWidth: true
});
.column img {
width: auto;
max-width: inherit;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<div class="column">
<div class="slider">
<div>
<img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt="">
</div>
<div>
<img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt="">
</div>
<div>
<img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt="">
</div>
</div>
</div>
max-width: 100%
.img { width: auto; max-width: inherit; }