Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как сделать адаптивные квадратные картинки?

Как сделать адаптивные квадратные картинки?


     24.01.2016    Общие вопросы по вёрстке, Стили (CSS)    1267

вопрос
Здравствуйте. У меня проблемы с адаптивной версткой и мне нужна ваша помощь. Задача очень простая.

Мне нужно сделать 2 прямоугольных блока. В этих блоках мне нужны квадратные картинки, хотя по умолчанию они не все квадратные. Делаю что-то на подобии блоков как в плеймаркете.

Как сделать с помощью css квадратные картинки, чтобы не нарушать пропорцию?

На данный момент у меня такая ситуация:
Как сделать адаптивные квадратные картинки?

Как сделать адаптивные квадратные картинки?

9 комментариев

BRAGA
Юзер

BRAGA - 24 января 2016 13:43 -

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

леший
Юзер

леший - 24 января 2016 13:49 -

Задаёте им значение

height: 100px;
width: 100px;

вместо
max-height: 100%;
max-width: 100%;

vitnet
Эксперт

vitnet - 24 января 2016 15:04 -


BRAGA
Юзер

BRAGA - 24 января 2016 13:43 -

Как на первом скрине.

леший
Юзер

леший - 24 января 2016 13:53 -


BRAGA
Юзер

BRAGA - 24 января 2016 13:56 -

Да, но они тогда будут всегда такого размера и не будут адаптивные в этих прямоугольниках, правильно?

леший
Юзер

леший - 24 января 2016 13:59 -

http://jsfiddle.net/gujbg/63/
вот, сделал же, всегда будут размером div'a в котором находятся, но с искажением пропорций

BRAGA
Юзер

BRAGA - 24 января 2016 14:03 -

Но блок получается не резиновый. Блок должен быть width:50% чтобы их было 2 на странице. Или я не правильно понял и ваши примеры на 100% решают проблему квадратных картинок в резиновых блоках?

леший
Юзер

леший - 24 января 2016 14:12 -

http://jsfiddle.net/gujbg/65/
поиграйтесь с размером окна результата, растягивая и уменьшая его мышкой и учите матчасть

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

Похожие вопросы

наверх