Как я могу изменить размер изображения и таблицы одновременно? - PullRequest
Новая
       42

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

0 голосов
/ 24 января 2012

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

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

  1. Пропорция изображения должна быть соблюдена.
  2. Все изображение всегда должно быть видно при любом разрешении экрана. (без прокрутки).
  3. Верхняя ячейка таблицы должна всегда иметь одинаковую ширину измененного размера изображения, но фиксированный максимум.
  4. Мое изображение ("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>

1 Ответ

0 голосов
/ 24 января 2012

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

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

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

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

...