首页 文章

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

提问于
浏览 次
4

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

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

为了获得完美的垂直节奏，我该如何处理这种情况？

这是截图来展示这个想法：

如您所见，图像下面的文字突破了VR网格 .

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

html css compass typography vertical-rhythm

2 回答

  • 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>
    回复于
  • 3

    图书馆

    我和我的同事已经创建了一个库，几乎可以理想地解决这个问题，并且图像失真最小 .

    随意查看，测试并在您的项目中使用：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));
  }

});

    它动态创建图像周围的容器，将图像宽度设置为auto，并使用 resize 事件手动计算相对于基线的图像高度 . 这样，图像将被右边框略微切割，但它应该有效 .

    这是结果：

    回复于

相关问题