search

imsky / holder

:city_sunrise: Client-side image placeholders.
http://holderjs.com
MIT License
5.84k stars 593 forks source link

Add support for specified aspect ratios. #218

Open EraYaN opened 6 years ago

EraYaN commented 6 years ago

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 commented 6 years ago

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