Не могу разобраться с масштабированием картинки

angry_cat

Здравствуйте. Проблема такова: есть html-страница, на ней в качестве шапки есть картинка размером 1100*105 рх. Хотелось бы сделать так, чтобы при уменьшении размера окна браузера картинка пропорционально уменьшалась. Вообще структура страницы такова:
<html>
<head>
    <title>блабла</title>
    <link href="style.css" rel="stylesheet" media="all" />
 
</head>
 
<body>
   <table WIDTH="100%">
  <tr>
   <td><td WIDTH="20 %">
   <td>
    <img SRC="http://www.cyberforum.ru/images/head3.bmp" WIDTH="100%">
   тут контент 
   </td>
      <td><td WIDTH="20 %">
  </tr>
</table>
 
</body>
</html>
могу прикрепить css-ку и саму картинку, если нужно.
14 ответов

angry_cat

если не сильно шаришь в веб-программировании, брось эту затею. Стандартными методами html/css так не сделаешь. Наверное придется юзать JavaScript, чтобы на лету ресайз делал. А это на соседний форум )).А вообще загугли shadowbox , может поможетhttp://www.cyberforum.ru/web-design/thread131582.html<-- вот тут кстати дельный совет дали: как вариант сделать картинку, плавно переходящую в фон


angry_cat

Хм... Смотря для чего тебе. Если ты хочешь сделать картинку которая будет разширяться - то JS поможет. Но учитывай что на больших мониторах при некачественной картинке либо на очень большом мониторе будут видны недочеты. Возможно будет проще сделать рисунок и подложить фон или картинку чтобы при увеличении окна картинка не растягивалась, а оставалась такой же но фон просто прибалялся. Если сделать фон, то делается это через background.


angry_cat

acupation, увеличивать картинку мне не надо, надо, чтобы она УМЕНЬШАЛАСЬ пропорционально уменьшаемому окну браузера. Странно вот что - в файрфоксе этот мой код работает, а в IE ни в какую не хочет. Фон есть, но он обычный, цветовой.


angry_cat

могу прикрепить css-ку и саму картинку, если нужно.
давай


angry_cat

Это вы вот этот код написали?
<html>
<head>
    <title>блабла</title>
    <link href="style.css" rel="stylesheet" media="all" />
 
</head>
 
<body>
   <table WIDTH="100%">
  <tr>
   <td><td WIDTH="20 %">
   <td>
    <img SRC="http://www.cyberforum.ru/images/head3.bmp" WIDTH="100%">
   тут контент 
   </td>
      <td><td WIDTH="20 %">
  </tr>
</table>
 
</body>
</html>
Возможно стоит позакрывать все тэги , а не только один единственный? Если не поможет отпишитесь.


angry_cat

ах ты ж ек-поперек! а ведь действительно! )))


angry_cat

Alorian, код мой. я, возможно, просто неточно его скопировала, в исходниках у меня все как надо пожалуй, вставлю еще раз:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<head>
    <title>Лекции</title>
    <link href="style.css" rel="stylesheet" media="all" />
</head>
 
<body>
 <table WIDTH="100%">
  <tr>
    <td WIDTH="7%"></td>
     <td>
      <img SRC="http://www.cyberforum.ru/images/head3.bmp" WIDTH="100%">
         КОНТЕНТ
     </td>
      <td WIDTH="7%"></td>
  </tr>
</table>
 
  </body>
</html>


angry_cat

а не проще разрезать картинку пополам, а потом просто с помощью css: background-repeat: repeat-x; закрывать в соответствии с расшырение монитора


angry_cat

varassa,


angry_cat

здесь можно зделать тёмные края, и потом картинку выставить по центру, немножко е1 уменыщыв, потом задать фон для бекграунда картинки такой какими будут края...


angry_cat

гы, работает в лисе, опере, хроме, сафари, ie8. не работает - в ie6, ie7 . Вывод - ie ниже 8 - отстой. Вот почему все нормальные браузеры заставляют себя обновлять, а это гумно нет?


angry_cat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
    <title>Лекции</title>
    <link href="style.css" rel="stylesheet" media="all" />
</head>
 
<body>
 
    <table width="100%">
        <tr>
            <td width="7%"></td>
            <td width="86%">
                <img src="head3.jpg" width="100%">
                контент
            </td>
            <td width="7%"></td>
        </tr>
    </table>
 
</body>
</html>
Попробуйте такой код. Мне негде проверить. Если заработает - отлично. Нет - буду думать дальше.


angry_cat

проверил - в иешках ниже 8 не работает.


angry_cat

Попробуй еще доктайп поменять на: либо