CSS обрезать изображение до квадрата

-3

Я хочу обрезать изображение с произвольным размером до квадратного соотношения сторон. Я просто хочу использовать CSS и хочу, чтобы он был отзывчивым и автоматически адаптировал witdth и height.

Функция css clip не работает с процентами. (Я использую загрузочную сетку)

Есть ли другие методы?

Спасибо за помощь и подсказки

  • 1
    Пожалуйста, добавьте свой код, есть несколько способов решить вашу проблему, но не видя вашей разметки и CSS, это как выстрел в небо
Теги:
twitter-bootstrap-3

2 ответа

1
Лучший ответ

Вы можете использовать фоновое изображение для этого, с background-size обложки.

DEMO

В демонстрационном примере я использую изображение с прямоугольными размерами (400x200), но div элемент имеет height и width по 200px.

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

div {
  background: #2a2828 url("http://lorempixel.com/400/200/") no-repeat center center/cover;
  height: 200px;
  width: 200px;
}
<div>
</div>
Поделиться
  • 0
    Проблема в том, что это не отвечает, не хочу использовать процентные значения
  • 0
    @Felix затем измените значения height и width на %
Показать ещё 9 комментариев
1

Проще всего было бы установить фиксированную ширину и высоту и крышку заднего плана.

.responsive-image {
    background-size: cover;
    background: url("url_of_the_image") 50% 50% no-repeat scroll transparent;
}
@media (max-width: 600px) {
    .responsive-image {
        height: 200px;
        width: 200px;
    }
}
@media (max-width: 800px) {
    .responsive-image {
        height: 400px;
        width: 400px;
    }
}

Я не уверен на 100% о синтаксисе

Поделиться
  • 1
    Проблема в том, что это не отвечает, не хочу использовать процентные значения
  • 0
    Вы можете использовать разные медиа-запросы. Я обновлю ответ
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню