Увеличение картинки, ограниченной пределами родительского блока

@Joo2014 · Регистрация: 11.04.2016

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

Мне нужно сделать так, чтобы была определенная граница, за которую картинка не выйдет. Допустим есть квадратная область в которую мы загрузили картинку и при нажатие на + она становилась крупнее и ближе.
https://www.cyberforum.ru/atta... 1488020846
Есть фотка. Жмешь + , он становится ближе. Жмешь минус, он становится дальше.

К примеру, шапка слишком маленькая и чтобы сделать все грамотно, нужно изображение сделать подальше.
В интернете , к сожалению, найти ничего не могу. Даже сформулировать не могу правильно.

Комментарий модератора

Один вопрос - одна отдельная тема!

@mrtoxas · 25.02.2017, 14:14

Заворачивайте картинку в обертку, которой задайте размеры и стиль overflow:hidden.

@Joo2014 · 25.02.2017, 14:24 **[ТС]**

Не получается:c Размеры меняются, но все равно увеличение идет

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
</head>
<body>
<div ><img border=1px class="e" id="img" src="1.jpg" alt="">
<br /><button onclick="zoom()">+</button></div> 
<script>
var img = document.getElementById('img');
var step = 10;
function zoom(){
    img.style.width = parseInt(getComputedStyle(img).width)+step+'px';
}
</script>
 
</body>
</html>

CSS
1
2
3
4
5
6
.e {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-color: black;
}

Добавлено через 1 минуту
Только после добавления размеров изображение стало увеличиваться в ширину только

@mrtoxas · 25.02.2017, 14:27

Задавайте в стилях только ширину изображения.

@Joo2014 · 25.02.2017, 14:28 **[ТС]**

Задал ширину, изображение увеличивается во всю страницу, как и было

@mrtoxas · 25.02.2017, 14:58

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    .wrapper{
    width:200px;
    height:200px;
    overflow: hidden;
    border:1px solid black;
  }
  .img-block{
    position: relative;
    height:100%;
  }
  img{
    position: absolute;
    top:50%;left:50%; 
    transform:translate(-50%,-50%);
    width:100%;
  }
  </style>
</head>
 
<body>
  <div class="wrapper">
    <div class="img-block">
      <img id="img" src="https://www.cyberforum.ru/images/cyberforum_logo.png" alt="" />
    </div>
  </div>
  <button onclick="zoom('-')">-</button>
  <button onclick="zoom('+')">+</button>
  <script>
    var img = document.getElementById('img');
  var step = 10;
  function zoom(sign){
      img.style.width = eval(parseInt(getComputedStyle(img).width)+sign+step)+'px';
  }
  </script>
</body>
 
</html>

@Joo2014 · 25.02.2017, 15:15 **[ТС]**

Работает. Спасибо огромное!

Добавлено через 11 минут
Прощу прощения.. А как сделать так-же ,только чтобы оно двигалось влево и вправо?

@mrtoxas · 25.02.2017, 15:42

Используем такой же скрипт, только меняем:

JavaScript
1
2
img.style.left = eval(parseInt(getComputedStyle(img).left)+sign+step)+'px'; //по горизонтали
img.style.top = eval(parseInt(getComputedStyle(img).top)+sign+step)+'px'; //по вертикали

@Joo2014 · 25.02.2017, 16:10 **[ТС]**

Я прошу прощения за свою тупость... Как соединить +- и лево право?:c Извините за беспокойство...

@mrtoxas · 25.02.2017, 17:33

Все так же, как в варианте с зумом, только имя функции другое и строка, которую выше привел.

Добавлено через 27 минут
Можно все одной функцией сделать

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
   .wrapper{
      width:200px;
      height:200px;
      overflow: hidden;
      border:1px solid black;
    }
    .img-block{
      position: relative;
      height:100%;
    }
    img{
      position: absolute;
      top:50%;left:50%; 
      transform:translate(-50%,-50%);
      transform-origin: center;
      width:100%;
    }
  </style>
</head>
 
<body>
  <div class="wrapper">
    <div class="img-block">
      <img id="img" src="https://www.cyberforum.ru/images/cyberforum_logo.png" alt="" />
    </div>
  </div>
  <button onclick="transform('zoom','-')">Уменшить</button>
  <button onclick="transform('zoom','+')">Увеличить</button>
  <br />
  <button onclick="transform('translateY','-')">Сместить вверх</button>
  <button onclick="transform('translateY','+')">Сместить вниз</button>
  <br />
  <button onclick="transform('translateX','-')">Сместить влево</button>
  <button onclick="transform('translateX','+')">Сместить вправо</button>
  
  <script>
     var img = document.getElementById('img');
     var step = 10;
     var act;
 
     function transform(e, sign) {
       switch (e) {
         case 'zoom':
           act = 'width'
           break;
         case 'translateX':
           act = 'left'
           break;
         case 'translateY':
           act = 'top'
           break;
         default:
           act = undefined;
       }
       img.style[act] = eval(parseInt(getComputedStyle(img)[act]) + sign + step) + 'px';
     }
 
  </script>
</body>
 
</html>

Новые блоги и статьи Все статьи Все блоги /
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(), которая. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	25.02.2017, 14:14
	Заворачивайте картинку в обертку, которой задайте размеры и стиль `overflow:hidden`. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	25.02.2017, 14:27
	Задавайте в стилях только ширину изображения. 0

@Joo2014 0 / 0 / 1 Регистрация: 11.04.2016 Сообщений: 74
	25.02.2017, 14:28 [ТС]
	Задал ширину, изображение увеличивается во всю страницу, как и было 0

@Joo2014 0 / 0 / 1 Регистрация: 11.04.2016 Сообщений: 74
	25.02.2017, 15:15 [ТС]
	Работает. Спасибо огромное! Добавлено через 11 минут Прощу прощения.. А как сделать так-же ,только чтобы оно двигалось влево и вправо? 0

@Joo2014 0 / 0 / 1 Регистрация: 11.04.2016 Сообщений: 74
	25.02.2017, 16:10 [ТС]
	Я прошу прощения за свою тупость... Как соединить +- и лево право?:c Извините за беспокойство... 0

Увеличение картинки, ограниченной пределами родительского блока

Решение