Javascript 调整图像大小以适合屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2569192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image resize to fit screen
提问by alberto
I created this code to resize photos/images to fit the screen, considering the space available for the nav bar.
考虑到导航栏的可用空间，我创建了此代码来调整照片/图像的大小以适合屏幕。
The script fires on image load and on navigation click.
该脚本在图像加载和导航点击时触发。
Does anyone have suggestions as to making this better and ensuring browser compatibility?
有没有人有关于使其更好并确保浏览器兼容性的建议？
HTML
HTML
$(document).ready(function(){
$("#photo").load(function(){
resize();
});
$(".navigation img").click(function(){
var imgPath = $(this).attr("src");
$("#photo").attr({ src: imgPath });
resize();
return false;
});
});
Javascript
Javascript
resize = function() {
var borderVt=150; //value based on css style. bottom bar + padding of photoContain
var borderHz=40; //value based on css style photoContain padding
$("#photo").css("width", "auto").css("height", "auto"); // Remove existing CSS
$("#photo").removeAttr("width").removeAttr("height"); // Remove HTML attributes
var origSizeW = $("#photo").width();
var origSizeH = $("#photo").height();
var ratioVt=(origSizeW/origSizeH);
var ratioHz=(origSizeH/origSizeW);
var winW = $(window).width();
var winH = $(window).height();
var screenSizeW=Math.round(winW-borderHz);
var screenSizeH=Math.round(winH-borderVt);
if (origSizeW>=origSizeH){
var newHeight = Math.round(screenSizeW*ratioHz);
if (newHeight <= screenSizeH){
$("#photo").css("width", screenSizeW); // Set new width
$("#photo").css("height", newHeight);
}
else{
$("#photo").css("height", screenSizeH);
}
}
else{
$("#photo").css("height", screenSizeH); // Set new height
}
};
回答by Robin Winslow
I know this question is well old, but here's asolution (although I'm sure the OP's works fine too):
我知道这个问题已经很老了，但这里有一个解决方案（尽管我确定 OP 也能正常工作）：
This jQuery plugin seems to do exactly what you need: http://code.google.com/p/jquery-imagefit-plugin/
这个 jQuery 插件似乎完全符合您的需求：http: //code.google.com/p/jquery-imagefit-plugin/
if you perform it on a 100% height, 100% width element: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
如果您在 100% 高度、100% 宽度元素上执行它：http: //www.tutwow.com/htmlcss/quick-tip-css-100-height/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://jquery-imagefit-plugin.googlecode.com/svn/trunk/jquery.imagefit-0.2.js"></script>
<div style="width: 100%; height: 100%">
<img id="h5" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"/>
</div>
<script>
jQuery('#h5').bind('load', function() {
jQuery('div').imagefit();
});
</script>
回答by Callmeed
Try using the jQuery-Backgrounder plugin. You might be able to tweak it to do what you need. Here is an example:
尝试使用jQuery-Backgrounder 插件。您也许可以对其进行调整以执行您需要的操作。下面是一个例子：
<script src="jquery.backgrounder.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$('#my_background').backgrounder({element : 'body'});
});
</script>
[...]
<div id="my_background"><img src="birthday.jpg" alt="Birthday party" /></div>
回答by mukama
I wrote a plugin!
我写了一个插件！
jQuery.fn.positionMe = function () {
var oH = $(window).height();
var oW = $(window).width();
var iH = this.outerHeight();
var iW = this.outerWidth();
// When the image is too small so, do nothing
if(iW>oW && iH>oH){
// Otherwise, proportionate the image relative
// to its container
if(oH/iH > oW/iW){
this.css("width", oW);
this.css("height", iH*(oW/iW))
} else {
this.css("height", oH);
this.css("width", iW*(oH/iH));
}
}
return this;
}
Usage:
用法：
$("#photo").positionMe();
回答by Scott Paterson
Here is how I do it:
这是我如何做到的：
jQuery(document).ready(function($) {
$('.wp-post-image').height($(window).height());
});
回答by kim3er
Looks good to me, but I would suggest attaching your resize function to jQuery's Window Resize Event handler. Then the image will stretch and shrink with the page.
对我来说看起来不错，但我建议将您的调整大小函数附加到 jQuery 的窗口调整大小事件处理程序。然后图像将随着页面拉伸和收缩。
回答by Siddharth Singh
var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||document.body.offsetWidth||window.screen.availWidth;
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||document.body.offsetHeight||window.screen.availHeight;
function resize() {
a=document.getElementsByClassName(' scale');
for(var i=0; i<a.length; i++){
var aW = a[i].offsetWidth;
var aH = a[i].offsetHeight;
var d=w/h;
var mT, mL;
if (d>=1.5){
aW=w;
aH=w-(w*(34/100));
mT=(aH/2)*-1;
mL=(aW/2)*-1;
} else {
aH=h;
aW=h+(h*(66/100));
mT=(aH/2)*-1;
mL=(aW/2)*-1;
}
a[i].style.height=aH+'px';
a[i].style.width=aW+'px';
a[i].style.marginTop=mT+'px';
a[i].style.marginLeft=mL+'px';
}
}
