i'm developing html page using compass/scss , vertical rhythm approach. i've set baseline , specified heights paragraphs , headings in rem units. works great , lays on vertical rhythm grid nicely. however, have central image takes 100% width of column (i want responsive , scale browser window).
the problem image breaks vertical rhythm because it's height calculated dynamically according browser width , image aspect ratio , not respecting baseline.
how handle situation in order have perfect vertical rhythm?
here's screenshot demonstrate idea:
as can see text below image breaks out of vr grid.
i've tried use respond.js jquery plugin, looks it's outdated , not working correctly.
i have made plugin case. please check out.
now available in npm, run npm install jquery-rhythmplease install.
please feel free leave kind of feedback.
the plugin not change aspect ratio of image.
$(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 dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.</span> </div> </div> </div>
Comments
Post a Comment