Квадратная картинка на CSS
Как сделать на CSS квадратную картинку? Тоесть имеется несколько картинок, одна 500×100, другая 100×500 обе картинки выводятся параметром width:30%; мне нужно сделать их квадратными, height:30%; использовать глупо.
Отслеживать
Роман Вешняков
задан 2 дек 2018 в 15:27
Роман Вешняков Роман Вешняков
83 1 1 серебряный знак 6 6 бронзовых знаков
а что Вы уже сделали?
2 дек 2018 в 15:40
сама картинка должна быть квадратной в общем aspect ratio должен быть таким а из портретной или из альбомной этого без дефектов не сделать
2 дек 2018 в 15:51
Nikolai Shabalin, спасибо большое!
12 ноя 2020 в 0:55
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Отслеживать
ответ дан 11 дек 2019 в 13:10
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
Один из старых трюков с помощью паддинга «распирать» блок в нужной пропорции. В Вашем случае это 1:1. А саму картинку сделать object-fit: cover;
.block < width: 30%; >.block__inner < width: 100%; padding-top: 100%; background-color: black; position: relative; >.image
Отслеживать
ответ дан 2 дек 2018 в 17:15
Nikolai Shabalin Nikolai Shabalin
56 2 2 бронзовых знака
Есть хорошее свойство aspect-ratio . Можно задать aspect-ratio: 1 контейнеру, а самому изображению:
width: 100%; height: 100%; object-fit: cover; //опционально Отслеживать
51.6k 200 200 золотых знаков 61 61 серебряный знак 242 242 бронзовых знака
ответ дан 7 апр в 8:50
Vsevolod Agafonov Vsevolod Agafonov
- css
- вёрстка
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Сделать квадратные картинки (ширина равна высоте), не зная их размеров
Ширина блока равна разной высоте экрана у разных девайсов, возможно ли это?
Я только собираюсь учить JS и практически ничего не знаю по этой теме, прошу помочь в одном.
Изменение размеров элементов двух StackPanel по высоте содержимого
Доброго времени суток. На форме имеется 2 объекта StackPanel в роли вертикальных списков элементов.
Высота textarea всегда равна высоте ячейки
Здравствуйте, вот таблица с полями textarea в ячейках, как сделать так, чтобы при растяжении или.
Ширина одного div равна ширине другого
Помогите написать скрипт. Суть такая: есть DIV1 и DIV2. Ширина DIV1 задана в процентах, ширина DIV2.
Как сделать адаптивные квадратные картинки?
Здравствуйте. У меня проблемы с адаптивной версткой и мне нужна ваша помощь. Задача очень простая.
Мне нужно сделать 2 прямоугольных блока. В этих блоках мне нужны квадратные картинки, хотя по умолчанию они не все квадратные. Делаю что-то на подобии блоков как в плеймаркете.
Как сделать с помощью css квадратные картинки, чтобы не нарушать пропорцию?
На данный момент у меня такая ситуация:
Ответил: леший
9 комментариев
Похожие вопросы
Без [thumb] увеличить картинки на сайте
12.02.2012 nalex Общие вопросы, Общие вопросы по вёрстке, Шаблоны (TPL), jQuery
Спойлер DLE
20.11.2012 eG Общие вопросы по вёрстке
Как вывести < fullimage-1 >в краткой новости?!
22.08.2013 gresius Общие вопросы по вёрстке
Отдельный рейтинг для каждой области (Смотрите пояснение)
01.09.2013 golden_eagle_god Общие вопросы по вёрстке
Как сделать это на jquery?
06.09.2013 Attyla Общие вопросы, Общие вопросы по вёрстке, Ламерские вопросы
расположение блоков div
21.01.2014 thirus Общие вопросы, Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)
Редактирование тега «thumb»
02.02.2014 TTATPuOT Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)
Переключатель страниц новостей в BlockPro
19.07.2014 jarrro Общие вопросы по вёрстке, jQuery, Модули
Адаптивный дизайн. Разные размеры для постеров новостей в зависимости от разрешения
21.07.2014 Kota Общие вопросы по вёрстке
Как сделать авто уменьшение картинок?
Последние события
Sinoid | Как сделать вывод статистики общего коли . 18
Sinoid
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 20:33
-
в каждый
пару ключ+значение массива $resultArray[] ? Если примерно как ниже, то не знаю, будут ли такие пары без ошибок влезать в html:
+
>
?>
3. Напиши пжл весь country.php ещё раз со всеми изменениями и с кэшированием.
rewenas | Как сделать вывод статистики общего коли . 18
rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 18:01
Сразу хочу сказать я в этом деле самоучка. Так что могу что то не так понимать и реализовывать
rewenas | Как сделать вывод статистики общего коли . 18
rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 17:59
1 Если тебе нужно вывести из $iso_countries массива только ключи то:
$keys = array_keys($iso_countries);
2 В смысле переопределять? Его никто даже не трогал. Или я тебя просто не понимаю. Я всего лишь думал что инпутом у тебя пользователи выбирают страну :в следствие чего у тебя в столбец land таблицы dle_users заноситься двухбуквенный код стран.
Ещё сделал выбор страны проживания, который заносится скриптом в стандартный DLE-тег
Поэтому этим кодом:
if (isset($iso_countries[$country])) { $country_name = $iso_countries[$country]; $tpl->set('{land>', $country_name); > else { $tpl->set('{land>', 'Код страны не найден'); >
Заменил этот двухбуквенный код на название страны
3 Тогда тебе нужно:
$result = $db->query("SELECT land, COUNT(*) AS user_count FROM " . USERPREFIX . "_users WHERE land != '' GROUP BY land"); $resultArray = array(); while ($row = $result->fetch_assoc()) { $country = $row['land']; $user_count = $row['user_count']; $country_counts[$country] = $user_count; > foreach ($country_counts as $country => $user_count) { $resultArray[] = array( 'Страна' => $country, 'Количество пользователей' => $user_count ); >
Результат запроса сохраняется в переменной $result. Далее создается пустой массив для хранения данных $resultArray = array(); И далее внутри цикла foreach в этот массив записывается каждый элемент массива $country_counts в виде массива с ключами страна и количество пользователей. Наверное это то что тебе как раз надо
Sinoid | Как сделать вывод статистики общего коли . 18
Sinoid
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 16:53
rewenas, Спасибо. Но:
1. $iso_countries будет содержать только коды. Названия стран потом будет выводить скрипт.
2. нельзя переопределять. Он мне нужен сам по себе как доп. поле каждого юзера. Туда заносится выбор страны юзером и оттуда отображается страна и флаг рядом с аватаром юзера в его комментах и в профиле.
3. На выходе из PHP мне нужен только сортированный (или нет) массив ненулевых количеств юзеров по каждой стране. Далее этот массив будет обрабатываться скриптом через библиотеку Chart.js , чтобы выводить диаграмму по всем странам. Bootstrap не использую. Про графическое представление списка на странице статов можешь не думать. Лучше сделай комментарии в коде PHP или здесь, что там происходит хотя бы в основной логике алгоритма.
rewenas | Как сделать вывод статистики общего коли . 18
rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 16:21
1 Создать в engine/data/ конфигурационный файл country-configuration.php с массивом ключей, представляющими коды стран и их значения.
"Андорра", 'AE' => "Объединенные Арабские Эмираты", 'AF' => "Афганистан", // Здесь надо добавить все оставшиеся 245 стран из нужных 249. Их очень много и добавлять очень долго, я не стал 'ZW' => "Зимбабве", ); ?>
2 Создать через систему плагинов или просто так в engine/modules/ файл с названием country.php
include_once ENGINE_DIR . "/data/country-configuration.php"; $tpl->load_template('users-country.tpl'); $tpl->result['users-country'] = dle_cache( "users-country_", $tpl->result['users-country'], true); if (!$tpl->result['users-country']) { $result = $db->query("SELECT land, COUNT(*) AS user_count FROM " . USERPREFIX . "_users WHERE land != '' GROUP BY land"); $country_counts = array(); while( $row = $db->get_row($result) ) { $country = $row['land']; $user_count = $row['user_count']; if (isset($iso_countries[$country])) { $country_name = $iso_countries[$country]; $tpl->set('{land>', $country_name); > else { $tpl->set('{land>', 'Код страны не найден'); > $tpl->set('{user-count>', $user_count); $tpl->compile('users-country'); > $tpl->clear(); create_cache( "users-country_", $tpl->result['users-country'], true ); > echo $tpl->result['users-country']; ?>
3 В папке вашего шаблона создать новый users-country.tpl файл. ( Стили в нем написаны просто для примера, их необходимо перенести в свой CSS файл вашего шаблона. Можно их изменять или добавлять новые, делая оформление на ваш вкус и цвет.)
4 В шаблоне stats.tpl вставить строку подключения {include file=»/engine/modules/country.php»>
rewenas | Как сделать вывод статистики общего коли . 18
rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 01:51
Не знаю насколько конечно это правильно, но я вижу это в голове у себе немного по другому. Завтра постараюсь реализовать
Sinoid | Как сделать вывод статистики общего коли . 18
Sinoid
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 01:11
rewenas, Понятно, что в статистику нет смысла выводить страны, которые никто не выбрал. Но ожидаю, что за несколько месяцев работы моего глобального научного сайта наберутся юзеры из около 60-80 стран. Всё равно много переменных выводить нужно. Допустим, внутри PHP считаем и формируем теги только тех стран zz, где > 0, заносим их в массив, сортируем по убыванию, а на страницу статистики выдаём список рейтинга из пар zz: . Как это всё реализовать в PHP?
rewenas | Как сделать вывод статистики общего коли . 18
rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 00:32
Можно например вывести только те страны что пользователи отметили у себя и посчитать в них суммарное количество пользователей. Причем сделать это отдельно подключаемым шаблоном, который отдельной строкой можно подключить в шаблоне статистики.
rewenas | Как сделать вывод статистики общего коли . 18
rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 00:30
Sinoid | Как сделать вывод статистики общего коли . 18
Sinoid
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
18-11-2023, 21:30
rewenas, А что делать? Есть какое-то другое решение. Ну и что, это лишь временные переменные в виде тегов.
- Sign In with Apple для DLE 14 2
- Модуль парсер ссылки с донора и з… 0
- Модификация аватарок DLE 16.1 27
- Модуль — Парсер статей и интеграц… 0
- Добавить поддержку для … 4
- Как обрезать название статьи 1
- Скрипт автозаполнения полей 3
- Парсер/граббер или конвертация БД 1
- Добавление дополнительного функци… 1
- Реализовать адекватную загрузку а… 4
- Запоминание открытой вкладки и со… 0
- Авторизация пользователей через Т… 0
- GeoIP — показ информации в зависи… 0
- Push-уведомление через OneSignal.… 0
- Giphy for comments (TinyMCE) 4
- Множественные опросы — модуль Mul… 0
- Расширенные закладки 0
- Расширение возможностей аккаунта … 0
- ChatGPT Driver 2
- Country Filter 0
Как сделать квадратные изображения?
Если пропорции не совпадают, то можно
1. растянуть
2. обрезать
3. повторять картинку
4. дополнить фоновым цветом/изображением.
Ответ написан более трёх лет назад
Нравится 4 3 комментария
lue merg @luemerg Автор вопроса
мне надо ее сделать как маску в фотошопе надеюсь ты понял
lue merg @luemerg Автор вопроса
а то что ты перечислил это все не красиво это ме
Stalker_RED @Stalker_RED
lue merg: Это вариант 2 — обрезать.
jsfiddle.net/Lqm08qtr
frontend-developer
Здесь в любом случае понадобится бекенд.
Как пример, можно определять ориентацию изображения и дальше от класса .horizontal или .vertical позиционировать через css (absolute, width/height: 100% — в зависимости от класса, left/top: 50% — в зависимости от класса, transform: translateX(-50%)/translateY(-50%) — тоже в зависимости от класса).
В таком случае оригинальные размеры изображения сохраняются (пользователь может его сохранить таким же).
Ну либо бекендом делать обычный crop.