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

Posted 2023-02-16

【中文标题】如何处理具有垂直节奏的响应式图像？

【英文标题】：How to handle responsive images with vertical rhythm?

【发布时间】：2015-10-06 01:02:28

【问题描述】：

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

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

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

---

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

---

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

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

【问题讨论】：

任何代码和 CSS 用于显示您的困境？在 aa codepen 或 jsfiddle 中可以使用假文本和图像；）

垂直节奏是一个目标……完美是不可能的。

您可以将图像放在一个容器中，并给该容器一个固定的高度和溢出：隐藏；这样，图像底部的 5-6 像素将被剪掉，重新对齐您的文本。

【参考方案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 事件手动计算相对于基线的图像高度。这样图像会被右边框略微切割，但它应该可以工作。

---

结果如下：

【参考方案2】：

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

现在在 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>

【讨论】：

这很酷。谢谢！为什么不把它放在 GitHub 和 Bower/npm 上呢？我很乐意尝试。

@SlavaFominII 你可以通过运行npm install jquery-rhythmplease获取源码，谢谢你的好建议！