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

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

вопрос

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

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

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

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

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

http://jsfiddle.net/gujbg/

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

Юзер

177

BRAGA - 2015-08-1824 января 2016 13:43 - #52101

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

Гости

435

леший - 2015-08-1824 января 2016 13:49 - #52103

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


height: 100px;
width: 100px;

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

PHP-developer

2583

vitnet - 2015-08-1824 января 2016 15:04 - #52112

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

Юзер

177

BRAGA - 2015-08-1824 января 2016 13:43 - #52102

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

Гости

435

леший - 2015-08-1824 января 2016 13:53 - #52104

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

Юзер

177

BRAGA - 2015-08-1824 января 2016 13:56 - #52105

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

Гости

435

леший - 2015-08-1824 января 2016 13:59 - #52106

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

Юзер

177

BRAGA - 2015-08-1824 января 2016 14:03 - #52107

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

Гости

435

леший - 2015-08-1824 января 2016 14:12 - #52108

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

TeraMoune | Как отключить миниатюры стандартной гале ...
TeraMoune
Как отключить миниатюры стандартной галереи Fancybox?
Вчера, 06:00
В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

Например: параметр Thumbs: false отключает миниатюры.
```
Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
```
derebas | Как реализовать шифрование трафика? ³

derebas
Как реализовать шифрование трафика?
18-11-2024, 16:52

Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:46

я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
Так и было...
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:39

чтоб не удалять выстави права и пользователя какие там идут на файлы. .
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:37

т.е. мне снести всё, что я уже загрузил как root, зайти под юзером и закачать снова?
Видосы в директории upload можно хоть оставить? их там 80 Гб
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:17

фтп обычный юзер а не root
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:15

дэк только так и загружаю
Gordi | Как реализовать шифрование трафика? ³

Gordi
Как реализовать шифрование трафика?
18-11-2024, 14:14

я тоже не понимаю....товарищ один, представитель хостинга сказал, что даже есть модули такие специальные под популярные цмс
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:13

Gordi,
через фтп загружай
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:11

Привет Николай!
Всегда загружал от root... посмотришь может? твой плагин тоже не виден ((
или направь на путь истинный, пжст