CSS:% размеров по ширине и высоте в меню с изображениями - PullRequest
Новая
       29

CSS:% размеров по ширине и высоте в меню с изображениями

1 голос
/ 27 августа 2011

У меня есть сайт, который должен подходить для мобильных посетителей, и поэтому должен масштабироваться до размеров экрана пользователя, как по ширине, так и по высоте. Кроме того, у меня есть 2 навигационных меню (1 слева, 1 справа) и некоторая фиксированная информация внизу (например, нижний колонтитул). Все эти части содержат изображения, которые должны быть масштабированы, чтобы соответствовать размерам меню. Конкретно, страница выглядит примерно так (добавляя случайное изображение, которое по умолчанию слишком велико): 

<body>
  <table class="wholepage">

    <tr class="top">

      <td class="left">
        <table>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
        </table>
      </td>

      <td class="middle">Middle content</td>

      <td class="right">
        <table>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
        </table>
      </td>

    </tr>
    <tr class="bottom">

      <table>
        <tr>
          <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
          <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
        </tr>
      </table>

    </tr>
  </table>
</body>

Со следующим CSS: 

.wholepage {
  width: 100%;
  height: 100%;
}

.wholepage img {
  width: 100%;
  height: 100%;
}

.top {
  height: 80%;
}

.left, .right {
  width: 15%;
}

.middle {
  width: 70%;
}

.bottom {
  height: 20%;
}

Таким образом, ширина страницы идеально адаптируется, придерживаясь 15% -70% -15% распределения между левым-средним-правым. Однако по вертикали все изображения отказываются масштабироваться. Как я могу заставить страницу соответствовать 80% -20% -ому распределению сверху вниз?

РЕДАКТИРОВАТЬ: Вот способ увидеть это, если вы заполните это в http://www.w3schools.com/css/tryit.asp?filename=trycss_default

<html>
<head>
<style type="text/css">

html, body {
  height: 100%;
}

.wholepage {
  width: 100%;
  height: 100%;
}

.wholepage img {
  width: 100%;
}

.top {
  height: 80%;
}

.left, .right {
  width: 15%;
}

.left {
  position: fixed;
  top: 0px;
  left: 0px;
}

.right {
  position: fixed;
  top: 0px;
  right: 0px;
}

.middle {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.bottom {
  height: 20%;
  position: fixed;
  bottom: 0px;
}


</style>
</head>

<body>
  <div class="wholepage">

    <div class="top">

      <div class="left">
        <table>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
        </table>
      </div>

      <div class="middle">Middle content</div>

      <div class="right">
        <table>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
        </table>
      </div>

    </div>
    <div class="bottom">

      <table>
        <tr>
          <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
          <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
        </tr>
      </table>

    </div>
  </div>
</body>

Спасибо!

Ответы [ 3 ]

1 голос
/ 27 августа 2011

Не используйте ширину и высоту, просто используйте max-width: 

.wholepage img {
  max-width: 100%;
}

IE <8 плохо масштабирует изображения, и для получения хорошего качества масштабирования вам нужно использовать <code>AlphaImageLoader с SizingMethod, установленным на scale. Вероятно, самый простой способ сделать это с библиотекой Дрю Диллера DD_BelatedPNG . Помните, что использование AlphaImageLoader может повлиять на производительность. Кроме того, IE6 не поддерживает max-width, поэтому используйте условный комментарий width: 100%, если вам нужна поддержка IE6.

Кроме того, я могу сказать достаточно о статье Этана Маркотта «Отдельная статья об адаптивном дизайне» (отрывок из превосходной его книги)

0 голосов
/ 02 сентября 2011

Я закончил взломом. Если кто-то не знает лучшего способа, вот что я сделал: 

function fixHorizontalDimension(){
  maxHeight = window.innerHeight * [% height desired] * 0.9;
  imgs = document.getElementsByClassName([classname of wrongly sized objects]);
  for(i=0; i<imgs.length; i++){
    imgs[i].style.height = maxHeight;
  }
}

Поскольку сайт предназначен только для личного пользования и использования мобильного браузера, это исправление делает свою работу. Изменение размера (например, переключение с портретного на альбомное) не работает.

0 голосов
/ 27 августа 2011

Во-первых;не используйте таблицы для стилизации.Используйте div или, что еще лучше, теги html5, такие как <header> и <footer> и т. Д.

Чтобы обеспечить правильную обработку высоты с процентами, вы должны также установить html и body на 100% высоты, например:

html, body { height: 100%; }
...