Javascript 全出血图像大小计算
我正在尝试编写一个JavaScript函数,该函数将扩展图像以始终填充div(因此根据需要裁剪顶部或侧面)。它是CSS3代码背景大小:cover的JavaScript等价物 我一辈子都想不出来。这就是我到目前为止所做的:Javascript 全出血图像大小计算,javascript,resize,crop,Javascript,Resize,Crop,我正在尝试编写一个JavaScript函数,该函数将扩展图像以始终填充div(因此根据需要裁剪顶部或侧面)。它是CSS3代码背景大小:cover的JavaScript等价物 我一辈子都想不出来。这就是我到目前为止所做的: function full_bleed(box_width, box_height, new_width, new_height) { var aspect_ratio=new_width/new_height;
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<box_width) {
new_width=box_width;
new_height=Math.round(new_width/aspect_ratio);
}
return {
width: new_width,
height: new_height
};
}
功能完全放气(箱宽、箱高、新箱宽、新箱高)
{
可变宽高比=新宽/新高;
如果(新高度多亏了Ben的评论,我就明白了
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
};
}
完全放气:功能(箱宽、箱高、imgWidth、imgHeight)
{
//计算新的高度和宽度
var initW=imgWidth;
var initH=imgHeight;
var比率=初始值/初始值;
imgWidth=箱宽;
imgHeight=箱宽*比率;
if(仪表板高度<箱体高度){
imgHeight=箱高;
imgWidth=imgHeight/比值;
}
//返回新尺寸
返回{
宽度:imgWidth,
高度:imgHeight
};
}
我对Drew的解决方案做了一些更改,以更好地满足我的需要
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]);
函数计算覆盖(框架、侧面){
var比率=边[1]/边[0],
封面={
宽度:frame.width,
高度:Math.ceil(frame.width*ratio)
};
如果(cover.height)你应该查看bgStretcher的源代码(或者直接使用它),这就是它的基本功能(虽然绑定到整个窗口),我知道我不应该只是说“谢谢”,而是伙计!!,我一直在浏览不同的jquery插件,并做了一些“if width>height”维切维萨,两天来一直在努力实现视频背景的正确比例!!你的解决方案很简单,我用了20分钟就实现了,终于!哦,我真的很感激,想知道为什么没有更多的选票…真的谢谢你=)我喜欢这个主意。如果你提前知道这个比例就好了。