Как показать только часть картинки?

@abc_privet · Регистрация: 17.03.2012

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

HTML5
1
2
3
<div>
<img  style="width: 200px; height: 200px" id="a" src="../image/a.jpg"  />
</div>

Как написать функцию которая будет показывать только часть картинки,
ограниченную координатами: x1,x2,y1,y2 ( от 1 до 200). Показываемая часть должна быть такая же как оригинал (без зумирования). Поскольку показываемая часть меньше 200х200, то видимая картинка должна выровнятся по левому краю, и по верху.

Как написать такой скрипт?
Как это делается: через css или вырезать картинку и показать, может есть еще врианты?

@kalabuni · 07.08.2012, 21:25

Здесь можно использовать свойство стиля clip.
Однако, имейте ввиду: если тег <img> имеет размер 200х200, то он по-любому займет место 200х200, если даже показывать только 1% от картинки.

@abc_privet · 07.08.2012, 21:37 **[ТС]**

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

Здесь можно использовать свойство стиля clip.
Однако, имейте ввиду: если тег <img> имеет размер 200х200, то он по-любому займет место 200х200, если даже показывать только 1% от картинки.

Это не мешеут, но видимая часть будет смещена вверх-лево?

Добавлено через 4 минуты
Похоже что видимая часть не сдвигается http://htmlbook.ru/css/clip

@resource2008 · 08.08.2012, 01:44

1. обернуть картинку блоком, установить ему в css overflow в hidden, размеры подогнать под разность координат и двигать внутри него картинку.

2. с clip-ом двигать картинку внутри обертки.

плюс overflow, position и z-index в стилях для картинки обертки.

это если я правильно тз понял)))

@kalabuni · 08.08.2012, 02:27

resource2008, это чересчур вы намудрили.

Свойство clip работает только у абсолютно-поцизионированных элементов.
Поэтому по-любому внешний DIV должен иметь position: relative (или absolute), а тег IMG - position: absolute.

Ну а раз так, то почему не воспользоваться свойствами top и left?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div style="position: relative; border: 1px solid #000; width: 200px; height: 100px">
<img src="https://www.cyberforum.ru/customavatars/avatar160624_3.gif">
</div>
 
<br><br>
 
<div style="position: relative; border: 1px solid #000; width: 200px; height: 100px">
<img src="https://www.cyberforum.ru/customavatars/avatar160624_3.gif"
    style="position: absolute; clip: rect(21px 70px 45px 48px)">
</div>
 
<br><br>
 
<div style="position: relative; border: 1px solid #000; width: 200px; height: 100px">
<img src="https://www.cyberforum.ru/customavatars/avatar160624_3.gif"
    style="position: absolute; clip: rect(21px 70px 45px 48px); left: -48px; top: -21px">
</div>

@resource2008 · 08.08.2012, 02:35

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

Ну а раз так, то почему не воспользоваться свойствами top и left?

дык я так и предлагал)))
про absolute для clip не знал. спасибо)

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

resource2008, это чересчур вы намудрили

где же там мудрено? то же самое:
или стилем обрезаем границы, или оберткой, и в обоих случаях двигаем картинку)

@kalabuni · 08.08.2012, 02:42

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

про absolute для clip не знал.

Читаем здесь первую строку -

The clip CSS property defines what portion of an element is visible. The clip property applies only to elements with position:absolute.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	07.08.2012, 21:25
	Здесь можно использовать свойство стиля clip. Однако, имейте ввиду: если тег <img> имеет размер 200х200, то он по-любому займет место 200х200, если даже показывать только 1% от картинки. 1

@resource2008 111 / 112 / 18 Регистрация: 11.03.2011 Сообщений: 421
	08.08.2012, 01:44
	1. обернуть картинку блоком, установить ему в css overflow в hidden, размеры подогнать под разность координат и двигать внутри него картинку. 2. с clip-ом двигать картинку внутри обертки. плюс overflow, position и z-index в стилях для картинки обертки. это если я правильно тз понял))) 0

Опции темы