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

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

В то время как я использую все различные типы кодов для изменения размера изображения, он всегда получает какое-то абсолютное позиционирование, выходящее за пределы таблицы или div, вместо того, чтобы перетаскивать их вместе.

Соотношение изображения должно быть соблюдено.
Все изображение должно быть всегда видимым на каждом разрешении экрана (без прокрутки).
Верхняя ячейка таблицы должна иметь одинаковую ширину измененного изображения, но фиксированный максимум.
My image ("1.jpg") первоначально 800x600.

Мой код:

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Test</title> 

<style> 

html, body, table { height:100%; width:auto; } 

.stretch { 
    height:100%; 
    width:auto; 
} 

</style> 

</head> 

<body> 

<table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td height="125px" bgcolor="#CCCCCC">&nbsp;</td> 
    </tr> 
    <tr> 
    <td><img src="images/1.jpg" class="stretch" /></td> 
    </tr> 
</table> 

</body>

источник

2012-01-23 amanique

вы используете только HTML ? – Phphelp

Вы можете использовать CSS3:

background:url("1.jpg"); background-size:100%;

полное объяснение можно найти здесь:

http://www.w3schools.com/cssref/css3_pr_background-size.asp

источник

2012-01-24 04:13:56

Стол по-прежнему не «автоматически расширяется» с различным размером окна, чтобы показать все изображение на фоне. Кроме того, это CS3, у меня будут проблемы с предыдущими версиями браузера. – amanique

Правда. Вы хотите использовать JavaScript или что-то еще? –

Да, я мог бы использовать javascript, если бы он сделал трюк. – amanique

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

ответ

Смежные вопросы