Сохранять высоту div, соответствующую соотношению сторон

Я работаю над созданием мобильного сайта нашего основного сайта. Способ, которым он разработан, составляет около 2x для сетчатки. То, что я собираюсь сделать, - установить основной контент с максимальной шириной 640 пикселей, шириной 100%. У меня есть определенное фоновое изображение, которое прекрасно подходит для этого. Но по мере того, как ширина div становится меньше, мне нужна высота и для настройки. Любые идеи?

Здесь css:

*{margin:0;padding:0}h1,h2,h3,h4,h5,p,li,a,cite{font-size:14px;font-weight:normal}button,img{border:0}body{font-family:Arial, sans-serif;}

body {
  margin:0;
  background-color:#fff;
}

.top, .body {
  max-width:640px;
  width:100%;
  margin:0 auto;
}

.top {
  background: white url(images/top.jpg) no-repeat;
  background-size:auto;
  overflow:hidden;
  height:124px;
  max-height:124px;
}

.top ul {
  list-style:none;
  height:100%;
}

.top ul li {
  height:100%;
  float:left;
  display:block;
}

Ответ 1

Я нашел ответ на этот вопрос. Он добавляет немного нестандартной разметки, но работает хорошо. Вы можете найти его здесь: http://jsfiddle.net/AdQ3P/

Логика находится в нижней части. в основном это должно быть (img_height/img_width) * 100.

Изменить Здесь код, поэтому не зависит от jsfiddle.

<div class="container">
  <div class="hero"></div>
</div>

.container {
  width:100%;
  max-width:500px;
}

.hero {
  width:100%;
  height:0;
  background-size:100%;
  background:url(http://img97.imageshack.us/img97/3410/photo2ue.jpg) no-repeat;
  padding-bottom:75%;
}

И это был один грязный стол, в котором я был lol.

Ответ 2

Вы также можете использовать небольшой jQuery. Я считаю, что преимущество заключается в том, что это семантически допустимое исправление, поэтому следующий парень, который редактирует ваш код, может легче понять, что происходит.

// Maintain aspect ratio of #my_div

// Set aspect ratio of #my_div
var aspect_ratio = 0.8;

// Store the jQuery object for future reference
var $my_div = jQuery("#my_div");

// Within your document ready function,
// Do an initial resize of #my_div
$(document).ready(function(){
  $my_div.height( $my_div.width() * aspect_ratio );
});

// Resize #my_div on browser resize
jQuery(window).resize(function() {
  $my_div.height( $my_div.width() * aspect_ratio );
});

Ответ 3

в то время как нефиксированная ширина (например, 100%) принимает всю ширину контейнера, высота элемента, если он не установлен на фиксированный размер, будет растягиваться, чтобы разместить любое содержимое в потоке (включая отступы, границы, границы..)

если вы можете использовать тег <img> вместо фонового изображения, вы можете применить max-width:100% к самому изображению, и он будет масштабироваться, чтобы соответствовать контейнеру - браузер позаботится о том, чтобы изменить его высоту, чтобы сохранить равномерное соотношение сторон, однако замена фона css меткой изображения не всегда возможна или лучший вариант с точки зрения семантики и/или любых проблем с макетами, с которыми вы можете столкнуться.

Ответ 4

Работает очень хорошо без заданной высоты или img, используя новые относительные единицы измерения размера шрифта, например. vm (http://www.sitepoint.com/new-css3-relative-font-size/).