Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Как сделать адаптивные квадратные картинки?

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


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

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

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

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

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

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

Комментарии пользователей (9)

BRAGA
1

89 | 4

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

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

леший
21

112 | 33

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

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

height: 100px;
width: 100px;

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

vitnet
218

2171 | 930

vitnet - 24 января 2016 15:04 - Эксперт


BRAGA
1

89 | 4

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

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

леший
21

112 | 33

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


BRAGA
1

89 | 4

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

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

леший
21

112 | 33

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

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

BRAGA
1

89 | 4

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

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

леший
21

112 | 33

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

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

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

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