如何处理垂直节奏的响应图像？ [英] How to handle responsive images with vertical rhythm?

问题描述

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

I'm developing an HTML page using Compass/SCSS and a vertical rhythm approach. I've set up a baseline and specified heights for paragraphs and headings in rem units. It works great and lays on a vertical rhythm grid nicely. However, I have a central image that takes 100% width of the column (I want it to be responsive and scale with the browser window).

问题是图像破坏了垂直节奏，因为它的高度是根据浏览器的宽度和图像宽高比动态计算的，并且不遵守基线。

The problem is that this image breaks vertical rhythm because it's height is calculated dynamically according to the browser width and image aspect ratio and is not respecting the baseline.

如何处理这种情况以便有完美的垂直节奏吗？

How do I handle this situation in order to have a perfect vertical rhythm?

下面的屏幕截图展示了这个想法：

Here's the screenshot to demonstrate the idea:

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

As you can see the text below the image breaks out of the VR grid.

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

I've tried to use Respond.js jQuery plugin, but looks like it's outdated and is not working correctly.

推荐答案

图书馆

我和我的同事创建了一个图书馆

The Library

Me and my colleague have created a library that solves this problem almost ideally with minimal image distortions.

可以随意查看它，对其进行测试并在您的项目中使用：
https://github.com/betsol/baseline-element

Feel free to look into it, test it and use in your projects: https://github.com/betsol/baseline-element

这是我最后想出的概念性解决方案：

Here's the conceptual solution I've came up with in the end:

$(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 事件以手动计算相对于基线的图像高度。这样一来，图像会被右边框略微裁切，但是应该可以使用。

It dynamically creates a container around image, set's image width to auto and uses resize event to manually calculate the image height with respect to baseline. That way image will be slightly cut by the right border, but it should work.

结果如下：

这篇关于如何处理垂直节奏的响应图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！