Масштабирование картинки

AKstoAK · March 15, 2008

Такой вопрос.

Как сделать так чтобы размеры картинки в ячейке таблицы изменялись относительно окна браузера?

я делаю так:

<table border="1" width="100%" height="100%" id="table1">
 <tr>
 <td>
 <img border="0" src="....jpg" width="100%" height="100%"></td>
 </tr>
</table>

таким макаром в IE у меня изменяется только высота, а вот в Мозиле все отлично масштабируется во всех плоскостях.

homm · March 15, 2008

А табличка у Вас в чем находится? А доктайп какой?

AKstoAK · March 15, 2008

Да все дело было в доктайпе у меня FrontPage поленился его вставить. Взял этот

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

все заработало.

AKstoAK · March 15, 2008

а нет ошибся!

вот полный код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
</head>
<body>
<table border="1" width="100%" height="100%" id="table1">
 <tr>
 <td>
 <img border="0" src="....jpg" width="100%" height="100%"></td>
 </tr>
</table>
</body>
</html>

с этим доктайпом вообще в IE ниче не масштабируется.

подскажите нормальный доктайп!

homm · March 16, 2008

Так нужно было?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
html,
body {
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;}
#table1 {
 width: 100%;
 height: 100%;}
.flexpic {
 width: 100%;
 height: 100%;
 vertical-align: bottom;
 position: absolute;
 z-index: 5;}
#content {
 position: relative;
 z-index: 10;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
</head>
<body>
 <img border="0" src="file://localhost/D:%5CPhoto%5CGirls%5C066.Traci%20Bingham.jpg" width="100%" height="100%" class="flexpic">
 <div id="content">
 text text text text text text text 
 </div>
</body>
</html>

AKstoAK · March 16, 2008

Да так работает.

Тока у меня несколько ламерских вопросов:вот эти таблицы стилей пишутся вручную?

И главный вопрос программы: Если мне нужно чтобы у меня вся страничка, со всем ее сожержимым, масштабировалась относительно браузера мне нужно для каждой картинки указывать ее размеры в процентах? или существуют какие-то скрипты для подгонки содержимого странички?

Если трудно ответить то дайте ссылку на литературу по этой проблемме.

homm · March 16, 2008

Тока у меня несколько ламерских вопросов:вот эти таблицы стилей пишутся вручную?

Это ВС? пишется вручную.

AKstoAK · March 17, 2008

Это значит каждую картинку на сайте нужно прописывать через стили, чтобы масштабировалось??? Это ж какой громоздкий код получается! Я тут смотрю коды разных сайтов, тактам масштабируется даже без процентов.

ЗЫ: да и почему все-таки в Мозиле все отлично работает без стилей - для разных браузеров разные коды???

AKstoAK · March 17, 2008

Вобщем я уже все перепробовал не меняется масштабирование в ячейке.

Пожалуйста укажите что я неправильно делаю:

вот код странички:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>resize</title>
</head>
<body>
<table border="1" width="100%" id="table1">
 <tr> 
 <td height="40%" width="100%">
 <img border="0" src="Сайт/Шапки/Шапка%202%20opt.jpg" class="head1"></td> 
 </tr>
 <tr> 
 <td> </td>
 </tr>
</table>
</body>
</html>

код style.ccs:

body {
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;}
table {
 width: 100%;
 height: 100%;}
.head1 {
 width: 100%;
 height: 100%;

размер картинки 1024X267 картинка меньше 1024 не сжимается - только расширяется, при увеличении окна браузера.

Интересный факт: если убрать доктайп, то картинка масштабируется по высоте, но по ширине всеравно нет

homm · March 17, 2008

Найди 10 отличий:

html,
body {
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;}

body {
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;}

AKstoAK · March 17, 2008

Найди 10 отличий:

html,
body {
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;}

body {
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;}

все почти так же, только опять начала масштабироватся высота, а верхняя ячейка (

) по высоте занимает явно не 40%, а большую часть страницы и никак не реагирует на изменение - все это только в IE!

homm · March 17, 2008

а верхняя ячейка () по высоте занимает явно не 40%
А нижняя у тебя сколько занимает? Верхняя 40%, нижняя одну строчку, оставшиеся 58% делятся поровну, верхняя выходит 69%, нижняя 31%.

AKstoAK · March 17, 2008

да с процентами я уже разобрался, но это не главное. Теперь осталось выяснить почему по горизонтали картинка не масштабируется? По вертикали ведь сжимается...

homm · March 17, 2008

Все работает. Код покажи.

AKstoAK · March 17, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>resize</title>
</head>
<body>
<table border="1" width="100%" id="table1">
 <tr>
 <td height="30%" width="100%" >
 <img border="0" src="Сайт/Шапки/Шапка%202%20opt.jpg" class="head1"></td> 
 </tr>
 <tr>
 <td height="70%"> </td>
 </tr>
</table>

</body>

</html>

ccs:

html,
body {
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;}

table {
 width: 100%;
 height: 100%;}
.head1 {
 width: 100%;
 height: 100%;

homm · March 17, 2008

Все работает.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
html,
body {
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;}

table {
 width: 100%;
 height: 100%;}
.head1 {
 width: 100%;
 height: 100%;
</style>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>resize</title>
</head>
<body>
<table border="0" width="100%" id="table1" cellpadding=0 cellspacing=0>
 <tr>
 <td height="70%" width="100%" >
 <img border="0" src="file://localhost/C:/template/whot.png" class="head1"></td> 
 </tr>
 <tr>
 <td height="30%"> </td>
 </tr>
</table>

</body>

</html>

AKstoAK · March 17, 2008

а у меня так не работает! всеравно появляется полоса прокрути если окно сжимаешь и из-за чего это может быть?

Sign In

Масштабирование картинки

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information