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

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

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

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

Delphi

    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

<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

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

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

@KOCMOHABTOB_11 0 / 0 / 0 Регистрация: 08.05.2011 Сообщений: 50
	05.06.2011, 02:43	3
	На 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

Опции темы