Как отцентрировать обрезанную картинку?

@father_igni · Регистрация: 08.03.2015

Студворк — интернет-сервис помощи студентам

Задача следующего плана.

Есть некие текст - описание, внутрь которого нужно вставить картинки.
Картинки имеют различные размеры и ориентацию. Потому вставляются в текст в виде квадратных превьюшек, допустим размером 150*150 (уменьшаем по минимальной ширине, все что не влезло по максимальной - режем). При наводе мышки на картинку - она увеличивается до какихто там размеров и не обрезается.

Вопрос - как заставить обрезать картинку по центру?

Добавлено через 1 час 50 минут
на данный момент реализовал с помощью php, можно и с помощью JavaScript конечно
но тут вопрос именно в чистом виде сделать

@Варис · 27.06.2015, 16:43

http://www.w3schools.com/css/css_align.asp

как-то так ?

@father_igni · 27.06.2015, 16:49 **[ТС]**

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

@daydark · 27.06.2015, 22:58

Сообщение от father_igni

тут вопрос именно в чистом виде сделать

Как-то так, я думаю...

CSS
1
2
3
4
5
6
7
.lowa {
   clip: rect(0, 150px, 0, 150px);
}
.lowa:active {
   clip: rect(0, 0, 0, 0);
   width: 100%;
   height: 100%;

HTML5
1
<img crc="SomeImg.jpeg" class="lowa" />

@father_igni · 27.06.2015, 23:45 **[ТС]**

что за clip?
разведаем

@daydark · 28.06.2015, 01:26

clip позволяет показывать только обрезанную часть блока.
синтаксис такой:

CSS
1
clip: rect(Y1, X1, Y2, X2);

Значения иксов и игреков не помню как задаются)

@father_igni · 06.07.2015, 13:49 **[ТС]**

То ли лыжи не едут, то ли я не понимаю этого свойства.

Данное свойство обрезает столько, сколько зададим (в пикселях или других единицах), а мне надо бы, чтобы величина обрезанной картинки была постоянной, а исходная картинка может быть любой (разные пропорции сторон, разная ориентация). Т.е. наоборот "отсечь лишнее" для получения заданной области.

Картинки планирую выбирать рандомом (может тогда и оставить РНР модуль, для их обрезки?) и вставлять в нужные места текста...

@whiteapps · 06.07.2015, 15:38

father_igni, background-size: cover

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Киев стоит - украинская песня zorxor 28.01.2026 wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@father_igni 1 / 1 / 1 Регистрация: 08.03.2015 Сообщений: 127

	Как отцентрировать обрезанную картинку? 27.06.2015, 14:08. Показов 1152. Ответов 7 Метки нет (Все метки) Задача следующего плана. Есть некие текст - описание, внутрь которого нужно вставить картинки. Картинки имеют различные размеры и ориентацию. Потому вставляются в текст в виде квадратных превьюшек, допустим размером 150150 (уменьшаем по минимальной ширине, все что не влезло по максимальной - режем). При наводе мышки на картинку - она увеличивается до какихто там размеров и не обрезается. Вопрос - как заставить обрезать картинку по центру? Добавлено через 1 час 50 минут* на данный момент реализовал с помощью php, можно и с помощью JavaScript конечно но тут вопрос именно в чистом виде сделать 0

@Варис 0 / 0 / 0 Регистрация: 27.06.2015 Сообщений: 2
	27.06.2015, 16:43
	http://www.w3schools.com/css/css_align.asp как-то так ? 0

@father_igni 1 / 1 / 1 Регистрация: 08.03.2015 Сообщений: 127
	27.06.2015, 16:49 [ТС]
	да, но нет... данные решения перепробованы, и работают в случае если картинка не обрезается, т.е. когда родительский элемент больше (либо равен) нашей картинке. но в нашем случае блок или ячейка явно меньше картинки... 0

@father_igni 1 / 1 / 1 Регистрация: 08.03.2015 Сообщений: 127
	27.06.2015, 23:45 [ТС]
	что за clip? разведаем 0

@father_igni 1 / 1 / 1 Регистрация: 08.03.2015 Сообщений: 127
	06.07.2015, 13:49 [ТС]
	То ли лыжи не едут, то ли я не понимаю этого свойства. Данное свойство обрезает столько, сколько зададим (в пикселях или других единицах), а мне надо бы, чтобы величина обрезанной картинки была постоянной, а исходная картинка может быть любой (разные пропорции сторон, разная ориентация). Т.е. наоборот "отсечь лишнее" для получения заданной области. Картинки планирую выбирать рандомом (может тогда и оставить РНР модуль, для их обрезки?) и вставлять в нужные места текста... 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	06.07.2015, 15:38
	father_igni, background-size: cover 0