Javascript 如何按比例调整图像大小/保持纵横比?
我有一些尺寸相当大的图像,我想用jQuery缩小它们,同时保持比例约束,即相同的纵横比Javascript 如何按比例调整图像大小/保持纵横比?,javascript,jquery,image,resize,Javascript,Jquery,Image,Resize,我有一些尺寸相当大的图像,我想用jQuery缩小它们,同时保持比例约束,即相同的纵横比 var ratio = (16/10); var height = getHeight(300,ratio); var width = getWidth(height,ratio); console.log(height); console.log(width); 有人能给我指出一些代码,或者解释一下逻辑吗?请看一下 如果图像是成比例的,那么此代码将用图像填充包装器。如果图像不成比例,则会裁剪额外的宽度/
var ratio = (16/10);
var height = getHeight(300,ratio);
var width = getWidth(height,ratio);
console.log(height);
console.log(width);
有人能给我指出一些代码,或者解释一下逻辑吗?请看一下
如果图像是成比例的,那么此代码将用图像填充包装器。如果图像不成比例,则会裁剪额外的宽度/高度
<script type="text/javascript">
$(function(){
$('#slider img').each(function(){
var ReqWidth = 1000; // Max width for the image
var ReqHeight = 300; // Max height for the image
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if (width > height && height < ReqHeight) {
$(this).css("min-height", ReqHeight); // Set new height
}
else
if (width > height && width < ReqWidth) {
$(this).css("min-width", ReqWidth); // Set new width
}
else
if (width > height && width > ReqWidth) {
$(this).css("max-width", ReqWidth); // Set new width
}
else
(height > width && width < ReqWidth)
{
$(this).css("min-width", ReqWidth); // Set new width
}
});
});
</script>
$(函数(){
$('#滑块img')。每个(函数(){
var ReqWidth=1000;//图像的最大宽度
var ReqHeight=300;//图像的最大高度
var width=$(this).width();//当前图像宽度
var height=$(this).height();//当前图像高度
//检查当前宽度是否大于最大值
如果(宽度>高度和高度<要求高度){
$(this.css(“最小高度”,ReqHeight);//设置新高度
}
其他的
如果(宽度>高度和宽度<要求宽度){
$(this.css(“最小宽度”,ReqWidth);//设置新宽度
}
其他的
如果(宽度>高度和宽度>宽度){
$(this.css(“最大宽度”,ReqWidth);//设置新宽度
}
其他的
(高度>宽度和宽度<要求宽度)
{
$(this.css(“最小宽度”,ReqWidth);//设置新宽度
}
});
});
此问题有4个参数
//Pseudo code
iX;//current width of image in the client
iY;//current height of image in the client
cX;//configured width
cY;//configured height
fX;//final width
fY;//final height
1. check if iX,iY,cX,cY values are >0 and all values are not empty or not junk
2. lE = iX > iY ? iX: iY; //long edge
3. if ( cX < cY )
then
4. factor = cX/lE;
else
5. factor = cY/lE;
6. fX = iX * factor ; fY = iY * factor ;
//伪代码
九,//客户端中图像的当前宽度
iY//客户端中图像的当前高度
cX//配置宽度
cY//配置高度
外汇//最终宽度
fY//最终高度
1.检查iX、iY、cX、cY值是否大于0,以及所有值是否为空或不是垃圾
2.lE=iX>iY?iX:iY//长边
3.if(cX
这是一个成熟的论坛,我不会给你代码:)事实上,我刚刚遇到了这个问题,我发现的解决方案非常简单和奇怪
$("#someimage").css({height:<some new height>})
$(“#someimage”).css({height:})
奇迹般地,图像被调整到新的高度,并保持相同的比例 如果我正确理解了这个问题,您甚至不需要jQuery。在客户端上按比例缩小图像只需使用CSS即可:只需将其
max width
和max height
设置为100%
<div style="height: 100px">
<img src="http://www.getdigital.de/images/produkte/t4/t4_css_sucks2.jpg"
style="max-height: 100%; max-width: 100%">
</div>
这是小提琴:我认为这是一个真正的:
/**
*保留原始区域的纵横比。缩小/放大时有用
*使图像适合某一区域。
*
*@param{Number}srcWidth源图像的宽度
*@param{Number}srchheight源图像的高度
*@param{Number}maxWidth最大可用宽度
*@param{Number}maxHeight最大可用高度
*@return{Object}{width,height}
*/
函数CalculateSpectratiofit(srcWidth、srcHeight、maxWidth、maxHeight){
变量比率=数学最小值(maxWidth/srcWidth,maxHeight/srcHeight);
返回{width:srcWidth*ratio,height:srcHeight*ratio};
}
对于一个可拖动的项目,这对我来说完全有效-aspectRatio:true
.appendTo(divwrapper).resizable({
aspectRatio: true,
handles: 'se',
stop: resizestop
})
没有额外的温度变量或支架
var width= $(this).width(), height= $(this).height()
, maxWidth=100, maxHeight= 100;
if(width > maxWidth){
height = Math.floor( maxWidth * height / width );
width = maxWidth
}
if(height > maxHeight){
width = Math.floor( maxHeight * width / height );
height = maxHeight;
}
请记住:搜索引擎不喜欢它,如果宽度和高度属性不适合图像,但他们不知道 有帮助吗 浏览器将负责保持纵横比不变 i、 当图像宽度大于高度时,e
max width
开始生效,其高度将按比例计算。同样地,当高度大于宽度时,最大高度将生效
您不需要任何jQuery或javascript
受ie7+和其他浏览器()的支持。经过一些尝试和错误,我找到了这个解决方案:
function center(img) {
var div = img.parentNode;
var divW = parseInt(div.style.width);
var divH = parseInt(div.style.height);
var srcW = img.width;
var srcH = img.height;
var ratio = Math.min(divW/srcW, divH/srcH);
var newW = img.width * ratio;
var newH = img.height * ratio;
img.style.width = newW + "px";
img.style.height = newH + "px";
img.style.marginTop = (divH-newH)/2 + "px";
img.style.marginLeft = (divW-newW)/2 + "px";
}
为了确定目标,您需要有一个目标比率
function getHeight(length, ratio) {
var height = ((length)/(Math.sqrt((Math.pow(ratio, 2)+1))));
return Math.round(height);
}
在本例中,我使用16:10
,因为这是典型的监视器纵横比
var ratio = (16/10);
var height = getHeight(300,ratio);
var width = getWidth(height,ratio);
console.log(height);
console.log(width);
上述结果将是
147
和300
这将适用于所有可能比例的图像
$(document).ready(function() {
$('.list img').each(function() {
var maxWidth = 100;
var maxHeight = 100;
var width = $(this).width();
var height = $(this).height();
var ratioW = maxWidth / width; // Width ratio
var ratioH = maxHeight / height; // Height ratio
// If height ratio is bigger then we need to scale height
if(ratioH > ratioW){
$(this).css("width", maxWidth);
$(this).css("height", height * ratioW); // Scale height according to width ratio
}
else{ // otherwise we scale width
$(this).css("height", maxHeight);
$(this).css("width", height * ratioH); // according to height ratio
}
});
});
可以使用CSS实现调整大小(保持纵横比)。
这是Dan Dascalescu的帖子所启发的进一步简化的答案
img{
最大宽度:200px;
/*或定义最大高度*/
}
以下是对Mehdiway答案的更正。新的宽度和/或高度未设置为最大值。一个好的测试用例如下(1768 x 1075像素):。(由于缺乏声誉积分,我无法在上面对此发表评论。) 2个步骤: 步骤1)计算图像的原始宽度/原始高度的比率
步骤2)将原始宽度/原始高度比乘以新的所需高度,得到与新高度对应的新宽度。此问题可以通过CSS解决
.image{
max-width:*px;
}
调整大小以适应容器,获取比例因子,缩小百分比控制
$(函数(){
让ParentHeight=200;
让ParentWidth=300;
$(document).ready(function() {
$('.list img').each(function() {
var maxWidth = 100;
var maxHeight = 100;
var width = $(this).width();
var height = $(this).height();
var ratioW = maxWidth / width; // Width ratio
var ratioH = maxHeight / height; // Height ratio
// If height ratio is bigger then we need to scale height
if(ratioH > ratioW){
$(this).css("width", maxWidth);
$(this).css("height", height * ratioW); // Scale height according to width ratio
}
else{ // otherwise we scale width
$(this).css("height", maxHeight);
$(this).css("width", height * ratioH); // according to height ratio
}
});
});
// Make sure image doesn't exceed 100x100 pixels
// note: takes jQuery img object not HTML: so width is a function
// not a property.
function resize_image (image) {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var ratio = 0; // Used for aspect ratio
// Get current dimensions
var width = image.width()
var height = image.height();
console.log("dimensions: " + width + "x" + height);
// If the current width is larger than the max, scale height
// to ratio of max width to current and then set width to max.
if (width > maxWidth) {
console.log("Shrinking width (and scaling height)")
ratio = maxWidth / width;
height = height * ratio;
width = maxWidth;
image.css("width", width);
image.css("height", height);
console.log("new dimensions: " + width + "x" + height);
}
// If the current height is larger than the max, scale width
// to ratio of max height to current and then set height to max.
if (height > maxHeight) {
console.log("Shrinking height (and scaling width)")
ratio = maxHeight / height;
width = width * ratio;
height = maxHeight;
image.css("width", width);
image.css("height", height);
console.log("new dimensions: " + width + "x" + height);
}
}
.image{
max-width:*px;
}