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

Я разрабатываю HTML-страницу, используя Compass/SCSS и подход с вертикальным ритмом. Я установил базовую линию и указал высоту для абзацев и заголовков в единицах rem. Он прекрасно работает и хорошо лежит на вертикальной сетке ритма. Тем не менее, у меня есть центральное изображение, которое занимает 100% ширины столбца (я хочу, чтобы оно было отзывчивым и масштабировалось с окном браузера).

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

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

Вот скриншот, чтобы продемонстрировать идею:

Как вы можете видеть текст ниже, изображение вырывается из сетки VR.

Я пытался использовать плагин Respond.js jQuery, но, похоже, он устарел и работает неправильно.

Источник

2 ответа

Решение

Библиотека

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

Не стесняйтесь изучать его, тестировать и использовать в своих проектах: https://github.com/betsol/baseline-element

Предварительное концептуальное решение

Вот концептуальное решение, которое я придумал в конце:

$(function () {

  var baseline = 24;

  var $image = $('#sample-image');
  var imageAspectRatio = ($image.width() / $image.height());

  wrapImage($image);

  window.addEventListener('resize', resizeImage);
  resizeImage();

  function wrapImage ($image) {
    var $wrap = $('<div class="image-wrap">')
      .css('overflow', 'hidden')
    ;
    $image
      .css('width', 'auto')
      .css('display', 'block')
    ;
    $image.after($wrap);
    $wrap.append($image);
  }

  function resizeImage () {
    var newHeight = ($image.parent().width() / imageAspectRatio);
    var leftover = (newHeight % baseline);
    $image.css('height', newHeight + (baseline - leftover));
  }

});

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

И вот результат:

Источник

Я сделал плагин для этого случая. Пожалуйста, проверьте это.

Теперь доступно в нпм, запустить npm install jquery-rhythmplease установить.

Пожалуйста, не стесняйтесь оставлять любые отзывы.

Плагин не меняет пропорции изображения.

$(function() {
  $('.rhythm-please').on('load', function() {
    $(this).rhythmPlease();
  });
});
img {
  width: 100%;
  height: auto;
}

body {
  background: -webkit-linear-gradient(top, transparent, transparent 26px, rgba(0, 173, 240, 0.1) 27px, rgba(0, 173, 240, 0.1));
  background: linear-gradient(to bottom, transparent, transparent 26px, rgba(0, 173, 240, 0.1) 27px, rgba(0, 173, 240, 0.1));
  background-size: 100% 28px;
}

.text {
  font-size: 16px;
  line-height: 28px;
  margin-bottom: 28px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/halfzebra/jquery-rhythmplease/master/src/jquery.rhythmPlease.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <p class="text">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4">
      <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      <img class="rhythm-please" src="http://placehold.it/350x230">
      <p class="text">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
    <div class="col-xs-4">
      <p class="text">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </div>
    <div class="col-xs-4">
      <img class="rhythm-please" src="http://placehold.it/500x690">
      <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12"><span class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
    </div>
  </div>
</div>

Источник
Другие вопросы по тегам