Как обрезать фото css
Перейти к содержимому

Как обрезать фото css

  • автор:

Как обрезать картинку сверху и снизу?

Необходимо обрезать картинку с двух сторон. Это верх и низ. Собственно нашёл один способ здесь же, но картинка обрезается исключительно снизу. Каким кодом воспользоваться?
И да, что имеем.

.imgshort width: 257px; 
height: 110px;
overflow: hidden;

text-align: center;
>
.imgshort img max-height:128px;
max-width: 257px;
>
Ответа пока нет

1 комментарий

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

Модификация тега hr

01.10.2011 compis Стили (CSS)

Окно загрузки файлов и изображений на сервер

30.06.2012 faqbill Стили (CSS)

как вывести текстовое окно поверх всех картинок

21.10.2012 wcw2007 Стили (CSS), jQuery

Скрыть ID но не сам блок

01.04.2013 Heon Шаблоны (TPL), Стили (CSS)

Не стабильно передвигается меню

10.08.2013 G-Force Стили (CSS), jQuery

Не выводятся комментарии и форма добавления

26.06.2014 Ilya78rus Общие вопросы, Шаблоны (TPL), Стили (CSS)

не работают подгруженные шрифты

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

Как ограничить параметр стиля?

29.10.2014 G-3p Общие вопросы по вёрстке, Стили (CSS)

Выпадающее меню в шаблоне, как срастить?

10.11.2014 jekonya Стили (CSS)

Как правильно прописать асоциативный массив + цикл в SCSS?

14.05.2015 evenegrad Стили (CSS)
Последние события
Roman12 | Помогите обновить плагин Alloha? 1
Roman12
Помогите обновить плагин Alloha?
Сегодня, 12:34
Сслыка на модуль: https://disk.yandex.ru/d/tR6tQgiAPfwDIA
Прошу помочь
ushkom | Помогите выяснить почему не работает кэш . 2

Фото ushkom

ushkom
Помогите выяснить почему не работает кэш?
16-02-2024, 14:42
Большое спасибо. Все работает
dj-avtosh | Помогите выяснить почему не работает кэш . 2

Фото dj-avtosh

dj-avtosh
Помогите выяснить почему не работает кэш?
16-02-2024, 07:49

$cs = intval($_GET['cstart']); 

надо выше чем dle_cache для начала.
dj-avtosh | Где я допускаю ошибку в кэше? 16

Фото dj-avtosh

dj-avtosh
Где я допускаю ошибку в кэше?
15-02-2024, 09:57

 result['topusers'] = dle_cache('topusers', $config['skin'], true); ! empty($tpl->result['topusers']) && $tpl->result['topusers'] = json_decode($tpl->result['topusers'], true); if( !is_array($tpl->result['topusers']) ) { $limit = ! empty($limit) && is_scalar($limit) ? (int)$limit : 5; $tpl->result['topusers'] = $db->super_query("SELECT * FROM " . PREFIX . "_users WHERE `news_num` > '0' ORDER BY `news_num` DESC LIMIT " . $limit, true); $tpl->clear(); create_cache('topusers', json_encode($tpl->result['topusers'], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES ), $config['skin'], true); > 

dj-avtosh | Где я допускаю ошибку в кэше? 16

Фото dj-avtosh

dj-avtosh
Где я допускаю ошибку в кэше?
15-02-2024, 09:50

$tpl->result['topusers'] = []; while ($row = $db->get_row($sql)) { $tpl->result['topusers'][] = $row; > 

ushkom | Где я допускаю ошибку в кэше? 16

Фото ushkom

ushkom
Где я допускаю ошибку в кэше?
14-02-2024, 17:50
Всем большое спасибо. Разобрался. Может кому пригодится
Для просмотра содержимого спойлера, перейдите к выбранному событию.
ushkom | Где я допускаю ошибку в кэше? 16

Фото ushkom

ushkom
Где я допускаю ошибку в кэше?
14-02-2024, 17:26

Спасибо за ответ. Прописал ниже, все равно, кэш не хочет работать. Дело в том что в dle15 работало все нормально.

dj-avtosh | Где я допускаю ошибку в кэше? 16

Фото dj-avtosh

dj-avtosh
Где я допускаю ошибку в кэше?
14-02-2024, 16:21

$tpl->clear();

я думаю должен быть ниже create_cache
dj-avtosh | Яндекс начал мудрить с заголовками якобы . 5

Фото dj-avtosh

dj-avtosh
Яндекс начал мудрить с заголовками якобы MySQL Fatal Error, что за ерунда?
14-02-2024, 16:10

Через сохраненную копию можно посмотреть и тело ошибки
Апельсин | Яндекс начал мудрить с заголовками якобы . 5

Апельсин
Яндекс начал мудрить с заголовками якобы MySQL Fatal Error, что за ерунда?
12-02-2024, 03:11

Падает сервер. Вот и вся проблема.

  • Перенести категории из правого бл… 1
  • Dle Профиль сделать 3
  • Адаптация для ДЛЕ 17 Мультивыбор … 5
  • Перенести функцию из загрузчика ф… 2
  • Добавление мерчанта (платежной си… 2
  • Куплю модуль «парсер актеров… 1
  • Cоздание сайтов (DLE) на тематику… 2
  • Настроить модуль WebShop 1
  • Доп. поле с выбором вариантов мет… 2
  • Вывод fullstory на главной страни… 6
  • Создание простого сайта отзывов (… 0
  • Кастомные стикер/смайлы для комме… 0
  • Бесконечная подгрузка полной ново… 0
  • Запоминание открытой вкладки и со… 0
  • Авторизация пользователей через Т… 0
  • GeoIP — показ информации в зависи… 0
  • Push-уведомление через OneSignal.… 0
  • Giphy for comments (TinyMCE) 4
  • Множественные опросы — модуль Mul… 0
  • Расширенные закладки 0

Обрезка и маска

На первый взгляд, странно стирать то, что было только что нарисовано. Но когда вы попытаетесь создать полукруг в SVG, то сразу столкнётесь со следующими свойствами.

Обрезка (Clipping) позволяет скрыть часть одного или нескольких элементов, используя другой. В этом случае нельзя настроить прозрачность элемента, это подход «все или ничего».

Маска, с другой стороны, позволяет создавать полупрозрачные эффекты (например, размытые края).

Кадрирование изображений

Мы можем создать полукруг на основе окружности:

svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> defs> clipPath id="cut-off-bottom"> rect x="0" y="0" width="200" height="100" /> clipPath> defs> circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> svg> 

По центру (100,100) нарисован круг с радиусом 100. Атрибут clip-path ссылается на элемент (en-US) , который содержит элемент rect . Этот прямоугольник позволит отрисовать верхнюю половину чёрного холста. Обратите внимание, что элемент clipPath обычно помещается в раздел defs .

При этом сам прямоугольник отрисован не будет. Вместо этого прямоугольник задаст область отрисовки. Так как прямоугольник перекрывает только верхнюю половину круга, нижняя половина круга исчезает:

Теперь мы получили полуокружность без необходимости использования элемента path . При «обрезке» каждый путь внутри clipPath проверяется и оценивается вместе с его свойствами stroke и transform . Другими словами, всё что не находится в залитой области clipPath не будет отображено. Цвет, непрозрачность и т. д. не влияют на результат.

Маска

Хороший пример использования маски — это градиент. В разных местах изображения с помощью масок можно добиться разной степени прозрачности.

svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> defs> linearGradient id="Gradient"> stop offset="0" stop-color="white" stop-opacity="0" /> stop offset="1" stop-color="white" stop-opacity="1" /> linearGradient> mask id="Mask"> rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" /> mask> defs> rect x="0" y="0" width="200" height="200" fill="green" /> rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" /> svg> 

Фактически на примере находятся два прямоугольника: зелёный на нижнем слое и красный на верхнем. У красного есть атрибут mask , который ссылается на элемент mask . Содержимое маски это элемент rect , заполненный градиентом, где прозрачная заливка перетекает в белую. В результате, пиксели красного прямоугольника наследуют прозрачность (alpha-value) маски, и мы видим красно-зелёный градиент:

Прозрачность opacity

Можно достаточно просто установить прозрачность для всего элемента, например используя атрибут opacity :

rect x="0" y="0" width="100" height="100" opacity=".5" /> 

Вышеуказанный прямоугольник будет полупрозрачным. Для того, чтобы задать непрозрачность заливке или контуру мы можем использовать 2 отдельных атрибута fill-opacity и stroke-opacity . Обратите внимание, что заполнение контура будет перекрывать основную заливку. Следовательно, если установить прозрачность контура у элемента, который также имеет заливку, половина контура наложится на цвет заливки, а другая на фон:

svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> rect x="0" y="0" width="200" height="200" fill="blue" /> circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" /> svg> 

В этом примере используется красный круг на голубом фоне. Жёлтый контур установлен на 50% непрозрачности, что приводит к эффекту двойного цвета.

Использование хорошо известных CSS техник

Одним из мощных инструментов является display: none . Поэтому неудивительно, что было принято решение использовать это CSS свойство в SVG вместе с visibility и clip , как определено в CSS 2. Для восстановления значения по умолчанию ранее важно знать, что начальное значение для всех элементов SVG — inline .

  • « Предыдущая статья
  • Следующая статья »

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как обрезать эскизы товаров по ширине и вписать по высоте?

Подскажите — как обрезать эскизы товаров на странице категории по ширине до квадрата и вписать по высоте. Я знаю, что есть плагин «правильные изображения», но он обрезает все картинки, в том числе и большую картинку товара, скажем у меня картинка 1200 х 930 — он обрезает и эскизы 180 х 180 и большую картинку делает 930 х 930, а мне нужно ее сохранить 1200 х 930.

Если не использовать, то тогда эскиз вписывается по ширине и получается — 180 х 140.

Знаю, что средствами css это можно сделать, но не силен. Как обрезать по ширине и вписать по высоте в 180х180?

25 ответов

1
Elena 25 февраля 2020 19:38 #

А сейчас вот так:

1

replicant 25 февраля 2020 20:10 #

Генерировать квадратную обрезь 180х180 и выводить её в каталогах товаров. При условии, когда исходник будет квадратный, то у таких ничего не пострадает. Если же исходник прямоугольный, то прикидывайте сами сколько там и чего срежет. Поля под такой обрез всегда можно заложить на стадии подготовки фото перед загрузкой.

Для этого ни плагины ни цэ-эс-эс не будут нужны.

Если вернете Панду на место на сайте, то будет удобнее посмотреть как и что подправить в css в реальном времени, но это, кмк, так себе решение, если честно, т.к. костыль. Лучше обрезь квадрат и дело в шляпе. Надежно как рельс с железной дороги.

И каталог стандартно будет выглядеть и голова не болит. Внутри карточки уже как угодно можно выводить.

1
Elena 25 февраля 2020 20:13 #

«Внутри карточки уже как угодно можно выводить» — вот в этом и вопрос был — как эскиз обрезать, а в карточке оставить?! Исходник прямоугольный и он не обрезается, а вписывается по ширине..

+1

replicant 25 февраля 2020 21:59 #

Магазин — Настройки — Изображения. Вы же как-то генерируете квадратные штуки 96х96 и 48х48 или нет? Вот так и с этими надо. Если весь каталог — это сплошные квадратные эскизы, то имеет смысл сразу всё квадратить для каталога товаров.

Решение на CSS такой задачи — костыль. Решить можно, но костыльность не пропадет. Работать будет, но костылем так и останется.

Почему костыль? Потому что в движке магазина есть встроенный метод генерации квадратной обрези налету, потому всё остальное и есть костыль.

0
Elena 25 февраля 2020 20:19 #
В чем «костыль»? Сейчас все такие задачи решаются с помощью css
+1
Elena 25 февраля 2020 22:01 #

Это просто пример.. Генерируются квадраты из квадратов Прямоугольник вписывается в квадрат по ширине..

+1

replicant 25 февраля 2020 22:02 #

Почему вы не хотите использовать имеющиеся инструменты движка в плане генерации малых эскизов нужного размера и квадратного вида? При этом ваша прямоугольная большая картинка останется прямоугольной и все будет как и задумано.

+1
Elena 25 февраля 2020 22:04 #

Еще раз — они генерируются как на втором рисунке — т.е. вписываются в квадрат по ширине.. Устал объяснять А нужно, чтобы вписывались по высоте, слева и справа обрезаясь.

+1

replicant 25 февраля 2020 22:13 #

И в шаблоне темы дизайна для вывода плиткой и табличкой поправить выбор другого эскиза.

А те эскизы, которые генерируете сейчас Макс. (ширина, высота) = 180 px выпилите вообще отовсюду и проблема решится сразу и глобально. Если всё должно быть квадратным в каталогах товаров, то вам они вообще не нужны.

+1
Elena 25 февраля 2020 23:47 #

Вот такие настройки у меня А результат как на второй картинке
Т.е. «выпилить» — это удалить в настройках вот это: «квадратная обрезка: 180х180 px» ?

1
Elena 26 февраля 2020 00:39 #

И в шаблоне темы дизайна для вывода плиткой и табличкой поправить выбор другого эскиза.

Я не специалист — что надо сделать конкретно? Вот в моем list-thumbs.html :
+1

replicant 26 февраля 2020 08:35 #

Выпилить — это убрать в шаблонах темы дизайна или настройках старое, ненужное, неправильное. В list-thumbs.html заменить 180 на 180×180 (х — латиницей). Т.к. у вас включена генерация на лету произвольных размеров эскизов, то в Настройках вы этого размера 180px и не увидите, а квадратная обрезь вообще сама появится после правки шаблона и задача упрощается в разы.

Верните прямоугольную Панду и проверьте.

Поскольку у вас включено сохранение оригинальных имен файлов и webp, то проверяйте обстоятельно и внимательно.

Для примера можете пройти по ссылке

https://belyibars.ru/wa-data/public/shop/products/68/31/3168/images/8253/tcvetok-garnitur.80x280.jpg

и поглядеть как меняется картинка, когда вы ей задаете в строке браузера новые размеры 180х180 или 80х80 или какие-нибудь 100х300. Понаблюдайте. Это полезно для понимания ситуации с генерацией эскизов встроенными средствами движка.

Поскольку у вас были квадратные исходники, то разницы между 180 и 180х180 вы не видели, а это два разных изображения с точки зрения шаблона и вообще два разных файла. Её (разницы) и не будет, если по приведенной выше ссылке именить размер картинки на просто 180.jpg. Но вам нужно именно второе значение размера после Х, если хотите получать квадратные эскизы для каталога из прямоугольных оригиналов.

1
Elena 26 февраля 2020 00:45 #

Вот в настройках темы дизайна:

Обрезка фона

Используйте утилиты bg-clip- для управления ограничивающей рамкой фона элемента.

div class="bg-clip-border p-6 bg-violet-600 border-4 border-violet-300 border-dashed">div> div class="bg-clip-padding p-6 bg-violet-600 border-4 border-violet-300 border-dashed">div> div class="bg-clip-content p-6 bg-violet-600 border-4 border-violet-300 border-dashed">div>

Используйте bg-clip-text , чтобы обрезать фон элемента, чтобы он соответствовал форме текста. Полезно для эффектов, когда вы хотите, чтобы фоновое изображение было видно сквозь текст.

Привет мир

div class="text-5xl font-extrabold . "> span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500"> Привет мир span> div>

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : bg-clip-padding , чтобы применять утилиту bg-clip-padding только при hover .

div class="bg-clip-border hover:bg-clip-padding"> div> 

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: bg-clip-padding , чтобы применить утилиту bg-clip-padding только на экранах среднего размера и выше.

div class="bg-clip-border md:bg-clip-padding"> div> 

Copyright © 2023 Tailwind Labs Inc.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *