Как сделать слайдер круглых изображений?

Question

[AleDv]

Всем привет. Есть задача сделать слайдер, в котором все фотографии будут "круглые". Дkя самого слайдера использую fotorama.

Я сделал контейнер, который, по идее, должен обрезать содержимое по кругу.

<div class="circle">
                <div class="fotorama" data-autoplay="true" data-nav="false" data-allowfullscreen="false" data-arrows="false">
                     <a href="https://img-fotki.yandex.ru/get/93500/22683142.1f/0_bfe23_e8586bbb_orig"></a>
                     <a href="https://img-fotki.yandex.ru/get/53680/22683142.1f/0_bfe24_6875c31f_orig"></a>
                </div>
          </div>

#cottage_battle .about .circle {
    width: 300px;
   height: 300px;
   border-radius: 100%;
   background: yellow;
   border: 3px solid red;
   overflow: hidden;
}

Цвета круга просто для наглядности. Получаю, такой результат:

а хотелось, чтобы изображение полностью заполняло круг по высоте.

Где я ошибся, поправьте меня? Или, может быть, я вообще не правильно начал решать задачу.

Comments

[Ярослав Иванов]

49 вопросов задал. Когда же вы научитесь код выкладывать на jsfiddle ? никому не сдалась ваша простыня с кодом.

[AleDv]

Ярослав Иванов: вас прямо за живое задело, столько желчи с двух предложениях.

Answer 1

[Максим Тимофеев]

берешь div-ы (опционально и a конечно можно) даешь им

border-radius: 50%;
background-repeat: no-repeat;
backgroun-position: 50% 50%;
background-size:cover;

width и height по вкусу
а background-url прописываешь в html в style
и вертишь их в слайдере (в fotorama.io без проблем)
Собственно вот: https://jsfiddle.net/ub6bvscf/

Comments

[AleDv]

Спасибо, Максим за конкретный пример.

Answer 2

[sergey]

Ошиблись вы в том, что не тому элементу задали округление, обычно изображению дают border-radius: 50%;
на примере slick-slider

.slick-slide img {
	  display: block;
	  width: 300px;
	  height: 300px;
	  border-radius: 50%;
	  overflow: hidden;
	}

вот как это выглядит:

Comments

[AleDv]

Тогда получается, что изображение сживается в эллипс и вписывается в большую окружность.

[sergey]

AleDv: с чего вы взяли?

[Максим Тимофеев]

SM: потому что он прав, и иначе и быть не может есть width не равно height https://jsfiddle.net/jrzrg54s/

[sergey]

Максим Тимофеев: в этом случае согласен

[sergey]

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

[Максим Тимофеев]

SM: пример в студию.

[sergey]

Максим Тимофеев: сорри, я уже и забыл что предварительно приводил изображения под нужный размер:), не прав. Давно просто было.

[Максим Тимофеев]

SM: теперь верю

[AleDv]

SM: если правильно понял, чтобы получить результат, как на ваше скрине исходные картинки должны быть квадратными?

[sergey]

AleDv: да