如何处理具有垂直节奏的响应式图像？

Question

我正在使用 Compass/SCSS 和垂直节奏方法开发 HTML 页面。我已经为段落和标题以 rem 单位设置了基线和指定高度。它效果很好，并且很好地放置在垂直节奏网格上。但是，我有一个中央图像，它占据了列的 100% 宽度（我希望它具有响应性并随浏览器窗口缩放）。

问题是这个图像打破了垂直节奏，因为它的高度是根据浏览器宽度和图像纵横比动态计算的，并且不尊重基线。

我该如何处理这种情况才能拥有完美的垂直节奏？

---

这是演示该想法的屏幕截图：

---

如您所见，图像下方的文本脱离了 VR 网格。

我尝试使用Respond.js jQuery 插件，但看起来它已经过时并且无法正常工作。

Answer 1

图书馆

我和我的同事创建了一个库，可以以最小的图像失真几乎完美地解决这个问题。

请随意研究它、测试它并在您的项目中使用： 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事件手动计算相对于基线的图像高度。这样图像将被右边框稍微剪切，但它应该可以工作。

结果如下：