Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for specified aspect ratios. #218

Open
EraYaN opened this issue May 4, 2018 · 1 comment
Open

Add support for specified aspect ratios. #218

EraYaN opened this issue May 4, 2018 · 1 comment

Comments

@EraYaN
Copy link

EraYaN commented May 4, 2018

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?

@imsky
Copy link
Owner

imsky commented May 5, 2018

good idea, i think it could be useful. will add to v3

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

No branches or pull requests

2 participants