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

@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.

Новые блоги и статьи Все статьи Все блоги /
Установка 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 и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

@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