I am trying to write a JavaScript function that will expand an image to fill a div always (so crop top or sides as needed). It is the JavaScript equivalent of the CSS3 code background-size: cover.
I can't for the life of me figure it out. This is what I have so far:
function full_bleed(box_width, box_height, new_width, new_height)
{
var aspect_ratio=new_width/new_height;
if(new_height<box_height) {
new_height=box_height;
new_width=Math.round(new_height*aspect_ratio);
}
if(new_width开发者_JS百科<box_width) {
new_width=box_width;
new_height=Math.round(new_width/aspect_ratio);
}
return {
width: new_width,
height: new_height
};
}
I figured one of you guys might have the equation lying around.
Thanks to the comment from Ben, I figured it out.
full_bleed: function(boxWidth, boxHeight, imgWidth, imgHeight)
{
// Calculate new height and width
var initW = imgWidth;
var initH = imgHeight;
var ratio = initH / initW;
imgWidth = boxWidth;
imgHeight = boxWidth * ratio;
if(imgHeight < boxHeight){
imgHeight = boxHeight;
imgWidth = imgHeight / ratio;
}
// Return new size
return {
width: imgWidth,
height: imgHeight
};
}
I made some changes on Drew's solution to better fit my needs.
function calculateCover(frame, sides) {
var ratio = sides[1] / sides[0],
cover = {
width: frame.width,
height: Math.ceil(frame.width * ratio)
};
if (cover.height <= frame.height) {
cover.height = frame.height;
cover.width = Math.ceil(frame.height / ratio);
}
return cover;
}
calculateCover({width: 1280, height: 822}, [16,9]);
The idea is the same, but the point here is to calculate the scaled up size without having an initial size of the media, instead using a given aspect ratio. I use it for video embeds, rather than images, where I load the video via YouTube API, for example, and I don't have any initial size, but I know the ratio and I want to stretch the video across the available space. (Of course, it can be changed back to calculate the ratio from the actual dimensions of the video or image.) Also made some code simplifications.
精彩评论