6

Делаю страничку, на которой пользователи заливают картинки, а потом эти картинки отображаются в слайдере. Картинки оказываются разных размеров и с разными расширениями, из-за чего слайдер при смене изображения либо меняется в высоте если картинка большая, либо становиться виден серый фон слайдера если картинка маленькая. Как можно сделать, чтобы слайдер не менялся в размерах при смене изображения, а все картинки растягивались по всему слайдеру? Естественно, нужно, чтобы адаптивность слайдера не была потеряна.

4
  • 1
    А что если использовать другой плагин для галереи? Например owl carusel 17 авг 2017 в 7:06
  • Ну вы посмотрите на пример по ссылке. Устраивает вас такое решение или нет? :) 17 авг 2017 в 7:09
  • Вы можете задать максимальную высоту картинок и ширину с помощью свойств max-height: , max-width c фиксированными значениями в пикселях или 100% и задав position: relative родительскому элементу. Это 1-ый способ. Второй способ: задать родительскому блоку слайдов ширину и высоту, можно в процентах, задать ему overflow: hidden. Слайдам внутри сделать фикс ширину width: 100%. Тогда изображения будут кропаться (обрезаться) в тех местах, где выше высоты слайдера 17 авг 2017 в 7:26
  • вот пример того что вышло all-servs.com/view_portfolio/80
    – heff
    16 ноя 2017 в 11:49

3 ответа 3

7
+200

Попробуйте плагин фоторама. Все картинки разных размеров.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<div class="col col-8">
<div class="fotorama" data-fit="cover" data-width="100%" data-nav="thumbs" data-allowfullscreen="true" data-width="300">
  <img src="https://habrastorage.org/web/e1c/fe3/86e/e1cfe386e6dc4d1b8cbdf6d6c7e5b9a6.gif">
  <img src="https://habrastorage.org/web/3af/617/723/3af6177236ca4fd580252efdbb8e0a56.jpg">
  <img src="https://habrastorage.org/web/6c8/2c9/92f/6c82c992f452473a8857d637bd0e2582.jpg">
  <img src="https://habrastorage.org/web/529/116/6a9/5291166a921441e3a5c9fcae98c6d643.jpg">
  <img src="https://habrastorage.org/web/e64/a15/8e5/e64a158e515744eeb43bbdfe33383fab.jpg">
</div>
</div>

<br>

<div class="fotorama" data-fit="cover" data-nav="thumbs" data-allowfullscreen="true" data-width="300">
  <img src="https://habrastorage.org/web/e1c/fe3/86e/e1cfe386e6dc4d1b8cbdf6d6c7e5b9a6.gif">
  <img src="https://habrastorage.org/web/3af/617/723/3af6177236ca4fd580252efdbb8e0a56.jpg">
  <img src="https://habrastorage.org/web/6c8/2c9/92f/6c82c992f452473a8857d637bd0e2582.jpg">
  <img src="https://habrastorage.org/web/529/116/6a9/5291166a921441e3a5c9fcae98c6d643.jpg">
  <img src="https://habrastorage.org/web/e64/a15/8e5/e64a158e515744eeb43bbdfe33383fab.jpg">
</div>

<br>

<div class="col col-lg-12">
<div class="fotorama" data-fit="cover" data-width="100%" data-nav="thumbs" data-allowfullscreen="true" data-width="300">
  <img src="https://habrastorage.org/web/e1c/fe3/86e/e1cfe386e6dc4d1b8cbdf6d6c7e5b9a6.gif">
  <img src="https://habrastorage.org/web/3af/617/723/3af6177236ca4fd580252efdbb8e0a56.jpg">
  <img src="https://habrastorage.org/web/6c8/2c9/92f/6c82c992f452473a8857d637bd0e2582.jpg">
  <img src="https://habrastorage.org/web/529/116/6a9/5291166a921441e3a5c9fcae98c6d643.jpg">
  <img src="https://habrastorage.org/web/e64/a15/8e5/e64a158e515744eeb43bbdfe33383fab.jpg">
</div>
</div>

10
  • С фоторамой у меня были раньше проблемы, если фоторам было несколько на страничке. 17 авг 2017 в 7:27
  • @larrymacbarry А что именно за проблема? Добавил ещё несколько, сейчас вроде нет такой. :) 17 авг 2017 в 7:37
  • Значит сейчас все ок. Пару лет назад, когда плагин фоторамы работал не с коллекциями, при наличии нескольких на странице все плыло. 17 авг 2017 в 7:46
  • @larrymacbarry да, вроде было что-то такое. Я помню лечилось уникальными ID или ClassName, при генерации на странице. 17 авг 2017 в 7:51
  • ок, проверю чуть позже и сообщу по результату
    – heff
    17 авг 2017 в 10:02
1

Лично я бы решил эту проблему так: В серверном обработчке использовал бы функцию обрезки изображения (сам недавно ее использовал - ссылка) и при загрузке фото обрезал бы их по необходимому формату и спокойно вывел бы в разметку. Более гибкий плагин карусели, который я использовал в своих проектах - slick (первая ссылка в гугле)

1

привет, тут нету вашего кода, но я бы сделал так:

если картинки у вас в IMG то, лучше убрать IMG и вместо него использовать какой-нибудь блочный элемент и картинку задать ему фоном и вот тогда ему уже можно задать фиксированную ширину и высоту и использовать backgroun-size: cover;

таким образом все картинки точно будут в контейнере и ни куда не будут вылазить и не будет ни какого фона видна

Ваш ответ

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

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