Как изменить размеры Img, не нарушая пропорции?

@yemets63 · Регистрация: 29.10.2008

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

каким образом я могу вписать картинку любого размера в прямоугольник размером например 260 на 260, вот так я могу сделать в Delphi, а как тоже самое сделать в HTML или JAVA

Delphi
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    image1.Width:=image1.Picture.Width;
    image1.Height:=image1.Picture.Height;
    w:=image1.Picture.Width;
    h:=image1.Picture.Height;
  while image1.Width>260 do
  begin
    Image1.Width:=round(w/(w/260));
    Image1.Height:=round(h/(w/260));
    image1.Repaint;
    image1.Refresh;
  end;
  while image1.Height>260 do
  begin
    image1.Height:=round(h/(h/260));
    image1.Width:=round(w/(h/260));
    image1.Repaint;
    image1.Refresh;
  end;

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

Спасибо

@sl_play · 04.06.2011, 23:51

@KOCMOHABTOB_11 · 05.06.2011, 02:43

На java то же самое, синтаксис чуток другой...

На html:
1. грузишь img с дефoлтным img размерами
<td id='myimg'>
<img src='abc.gif'>
2. вытаскиваешь получившиеся размеры контейнера
позднее где-нибудь в <script>:
...
<h = myimg.clientHeight;>
...
3. пересчитываешь
4. ставишь explicite размеры контейнера
...
<myimg.clientHeight = h;>
...

done

@yemets63 · 07.06.2011, 22:59 **[ТС]**

не ни фига не работает
на сколька я понимаю все должно быть вот так?

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
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251'>
 
<script> 
  function PicF() { 
    pic.width='120';
    pic.height='180';
    pic.explicite;
  }
</script>
 
<body onLoad='PicF'>
  <table>
    <tr>
      <td>
    <img name='pic' src='mypic.jpg'>
      </td>
      <td>
         что нибудь
      </td>
    </tr>
  </table>
</body>
</html>

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

как заставить чтоб оно менялось, ни хрена я в этих скриптах не петрю, и книжки нет

Спасибо

@KOCMOHABTOB_11 · 08.06.2011, 05:39

Прифет.
Всё хорошо, всё работает.

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
<script language=JavaScript>
function ResizeImg(obj)
{
    var w = obj.clientWidth;
    var h = obj.clientHeight;
    
    var k = 1;
    
    if(w > 400) {
        k = w / 400;
        w = 400;
        h = Math.round(h / k);
    }
    
    if(h > 30) {
        k = h / 30;
        h = 30;
        w = Math.round(w / k);
    }
    
    
        
    oW.innerText = obj.clientWidth;
    oH.innerText = obj.clientHeight;
    nW.innerText = w;
    nH.innerText = h;
    kf.innerText = k;
 
    imgIMG.width = w;
    imgIMG.height = h;
}
 
</script>
 
<table border=1>
    <tr><td height=50 align=center valign=middle>dynamicly resized</td></tr>
    <tr>
        <td id=imgTD>
            <div id=imgDIV style='position:relative; left:0; top:0; z-index:1; visibility: visible'>
                <img src='images/jakarta-logo.gif' id=imgIMG onload=ResizeImg(this) border=1>
            </div>
        </td>
    </tr>
    
    <tr>
        <td>
            <div id=DEBUG style='position:relative; left:0; top:0; z-index:1; visibility: visible'>
                <table border=1 width=100%>
                    <tr><th>oldW</th><th>oldH</th><th>newW</th><th>newH</th><th>k</th></tr>
                    <tr>
                        <td id=oW>-1</td><td id=oH>-1</td><td id=nW>-1</td><td id=nH>-1</td><td id=kf>1</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
    <tr><td height=50 align=center valign=middle>hard coded image dimensions 316x30h</td></tr>
    <tr><td><img src='images/jakarta-logo.gif' width=316 height=30 border=1></td></tr>
 
    <tr><td height=50 align=center valign=middle>original 505x48h</td></tr>
    <tr><td><img src='images/jakarta-logo.gif' border=1></td></tr>
    
</table>

Новые блоги и статьи Все статьи Все блоги /
Дальние перспективы сервера - слоя сети. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .

@sl_play 4 / 4 / 3 Регистрация: 25.05.2009 Сообщений: 2,576
	04.06.2011, 23:51
	<iframe src='myImage' style='width:260;height:260;'> 0

@KOCMOHABTOB_11 0 / 0 / 0 Регистрация: 08.05.2011 Сообщений: 50
	05.06.2011, 02:43
	На java то же самое, синтаксис чуток другой... На html: 1. грузишь img с дефoлтным img размерами <td id='myimg'> <img src='abc.gif'> 2. вытаскиваешь получившиеся размеры контейнера позднее где-нибудь в <script>: ... <h = myimg.clientHeight;> ... 3. пересчитываешь 4. ставишь explicite размеры контейнера ... <myimg.clientHeight = h;> ... done 0

Опции темы