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

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

вопрос

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

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

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

На данный момент у меня такая ситуация:

Ответил: леший

http://jsfiddle.net/gujbg/

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

Юзер

177

BRAGA - 2016-01-2424 января 2016 13:43 - #52101

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

Гости

435

леший - 2016-01-2424 января 2016 13:49 - #52103

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


height: 100px;
width: 100px;

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

PHP-developer

2583

vitnet - 2016-01-2424 января 2016 15:04 - #52112

http://jsfiddle.net/gujbg/66/

Юзер

177

BRAGA - 2016-01-2424 января 2016 13:43 - #52102

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

Гости

435

леший - 2016-01-2424 января 2016 13:53 - #52104

http://jsfiddle.net/gujbg/63/

Юзер

177

BRAGA - 2016-01-2424 января 2016 13:56 - #52105

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

Гости

435

леший - 2016-01-2424 января 2016 13:59 - #52106

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

Юзер

177

BRAGA - 2016-01-2424 января 2016 14:03 - #52107

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

Гости

435

леший - 2016-01-2424 января 2016 14:12 - #52108

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

non-stop | Как решить проблему индексации DLE в пои ... ¹

non-stop
Как решить проблему индексации DLE в поиске Bing?
19-12-2024, 17:02

Забыл написать что обновился до последней версии 17.3
Интересно узнать, это только у меня проблема, или это проблема движка? проверьте свои сайты на наличие в поиске Bing.
В 11 винде именно эта поисковая система стоит по умолчанию . кроме того эта же поисковая система отвечает за индекс еще одного поисковика - yahoo. Эти системы могут давать дополнительный процент пискового трафика на сайты.
lutskboy | Как максимально грамотно организовать до ... ¹

lutskboy
Как максимально грамотно организовать добавление материалов через SQL-запросы?
18-12-2024, 21:39

все верно. related_ids автоматом заполняется потом.
derebas | Убираем xfsearch из адресной строки ⁷

derebas
Убираем xfsearch из адресной строки
16-12-2024, 02:35

в правилах транслитерации для tagvalue поставьте замену " " => "-", например так
str_replace(array('.', ' ', '/', '&', "'", '+', '«', '»', ':', '!'), array('', '-', '-', 'and', '', '', '', '', '', '')
toxicpioner | Убираем xfsearch из адресной строки ⁷

toxicpioner
Убираем xfsearch из адресной строки
15-12-2024, 19:31

если в доп поле есть пробел, будет выдавать просто 403 стр
dj-avtosh | Воспользовался хаком удаление html из ад ... ²

dj-avtosh
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
12-12-2024, 17:26

Нужно правило с year поднять выше всех в .htaccess
TeraMoune | Воспользовался хаком удаление html из ад ... ²

TeraMoune
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
11-12-2024, 22:12

У вас убрано слишком много отличительных признаков в ссылках и теперь ссылки пересекаются. Убрали xfsearch, убрали html, а так же зачем то убрали дефиз разделяющий id и alt_name. Теперь некоторые ссылки будут отвечать выражению под правила ссылок новостей. Исправить вы можете только переосмыслив эти ссылки и добавить в них каких-то отличительных особенностей, переосмыслить чпу.
toxicpioner | Как упорядочить ID новостей ¹⁹

toxicpioner
Как упорядочить ID новостей
9-12-2024, 22:24

***Комментарий удален***
DnCnv | Как показать только одну категорию, к ко ... ¹

DnCnv
Как показать только одну категорию, к которой принадлежит новость?
9-12-2024, 01:46

***Комментарий удален***
web102 | Почему не отображается картинка в галере ... ³

web102
Почему не отображается картинка в галерее?
4-12-2024, 11:49

дайте адрес сайта. можно в личку
Shandi | Почему не отображается картинка в галере ... ³

Shandi
Почему не отображается картинка в галерее?
3-12-2024, 08:53

Мне как ламеру ничего не понятно:( Кто-то это исправляет за денужку?