Skip to content

Add support for specified aspect ratios. #218

Description

@EraYaN

So now when I want to have a 100% wide 16:9 image (think thumbnail) I have to calculate the height manually, I have to get the width of the (actual rendered) image and then put it through the /16*9 calculation.
One could think that something like this would render an 16:9 auto sizing image.

<div class="container">
    <div class="row align-items-stretch">
        <div class="col-md-12">
            <img data-src="holder.js/16x9?auto=yes"/>
        </div>        
    </div>
</div>

Right now with would be holder.js/100px624?auto=yes for a md-12 column on a large screen, but that second dimension is screen size dependent. Which makes it unusable, outside of my own development machine screen. (624=1110/16*9, with 1110 being the tested rendered width at 100%)

Maybe either and extra flag or another unit. say 100px56r (With the r referring to ratio and thus the percentage of the actual width (forced and recalculated))

Or maybe 16rx9r?auto=yes and that making a autoscaling (fill the container until on of the sides "hit" any thing, being height or width.)

Or an extra flag forceAspect with the size given in a 100px56p type of way.

I looked at the source but I'm quite lost. Right now I tried to just wrap the script, but it is not very user friendly.

Maybe something for v3?

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions