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

Question

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

问题是这张图片打破了垂直节奏，因为它的高度是根据浏览器宽度和图片纵横比动态计算的，不符合基线。

如何处理这种情况才能获得完美的垂直节奏？

---

下面是展示这个想法的截图:

---

如您所见，图像下方的文字超出了 VR 网格。

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

Answer 1

我为这个案例制作了一个插件。请检查一下。

现在在 npm 中可用，运行 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>