[英]fit image to screen properly in javascript
I need to resize image from its natural size to fit the screen the same way as Chrome does with opened images in it, I wrote a rescale(
) function for this purpose (below). 我需要按照自然尺寸调整图像大小以适合屏幕,就像Chrome浏览器中打开图像的方式一样,为此我编写了一个rescale(
)函数(如下)。
It works mostly fine but for big landscape-oriented images (example where both width and height both exceed screen after resizing with my function http://imageontime.com/upload/big/2013/07/20/51ea60b522bba.jpg ) fullscreened image still exceeds screen by few lines at height (and rarely at width), so i wanted to ask if there is a better rescale javascript function out there or if here are any chromium source adepts who could look into chromiums source code to get the image resizing function from it so I could port it into javascript? 它通常可以正常工作,但适用于大型横向图像(例如,在使用我的函数http://imageontime.com/upload/big/2013/07/20/51ea60b522bba.jpg调整大小后,宽度和高度均超过屏幕)仍然超出屏幕几行的高度(很少是宽度),所以我想问一下是否有更好的缩放javascript函数,或者这里是否有任何铬源专家可以研究铬源代码来调整图像大小从它的功能,所以我可以将其移植到javascript?
Here's the code: 这是代码:
function setautow() {
img.style.width = 'auto';
img.style.removeProperty("height");
if (document.documentElement.clientHeight == 0) // Firefox again...
{
img.height = window.innerHeight;
}
else {
img.height = document.documentElement.clientHeight;
}
}
function setautoh() {
img.style.height = 'auto';
img.style.removeProperty("width");
if (document.documentElement.clientWidth == 0) // FF
{
img.width = window.innerWidth;
}
else {
img.width = document.documentElement.clientWidth;
}
}
function shrink(a) {
if (a) {
if (img.width != document.documentElement.clientWidth) {
setautoh();
}
}
else {
if (img.height != document.documentElement.clientHeight) {
setautow();
}
}
}
var rescaled = false;
function rescale() {
if (rescaled) {
rescaled = false;
img.height = img.naturalHeight;
img.width = img.naturalWidth;
img.style.removeProperty("height");
img.style.removeProperty("width");
}
else {
rescaled = true;
if (img.naturalWidth > img.naturalHeight) {
setautoh();
setTimeout(function () {
shrink(true);
}, 0);
}
else {
setautow();
setTimeout(function () {
shrink(false);
}, 0);
}
}
}
The following seems to do the job nicely, as long as image width/height is not specified in CSS. 只要未在CSS中指定图片宽度/高度,以下内容似乎就可以很好地完成工作。
#Javascript
window.onresize = window.onload = function()
{
resize();
}
function resize()
{
var img = document.getElementsByTagName('img')[0];
winDim = getWinDim();
img.style.height = winDim.y + "px";
if (img.offsetWidth > winDim.x)
{
img.style.height = null;
img.style.width = winDim.x + "px";
}
}
function getWinDim()
{
var body = document.documentElement || document.body;
return {
x: window.innerWidth || body.clientWidth,
y: window.innerHeight || body.clientHeight
}
}
#CSS
body{
margin:0;
padding:0;
text-align:center;
background:rgb(51, 51, 51);
}
#HTML
<img src="http://placehold.it/4000x3000" />
Finally made what I was looking for, works great for FireFox + Chrome 终于满足了我的需求,非常适合FireFox + Chrome
edit: well, perfect for images larger than screen, gonna work on it so it could work on smaller images 编辑:很好,非常适合大于屏幕的图像,可以在它上面工作,以便可以在较小的图像上工作
function fit_to_screen()
{
img.removeAttribute("style");
var winX = window.innerWidth + "px";
var winY = window.innerHeight + "px";
var vbar = false;
if (document.body.scrollHeight > document.body.clientHeight) // vertical scrollbar
{
img.style.height = winY;
vbar = true;
}
if (document.body.scrollWidth > document.body.clientWidth) // horizontal scrollbar
{
if (vbar) // both scrollbars
{
if ((document.body.scrollHeight - document.body.clientHeight) > (document.body.scrollWidth - document.body.clientWidth)) // let's see which one is bigger
{
img.removeAttribute("style");
img.style.height = winY;
}
else
{
img.removeAttribute("style");
img.style.width = winX;
}
}
else
{
img.removeAttribute("style");
img.style.width = winX;
}
}
}
// bonus, switch between original size and fullscreen
var rescaled = false;
function rescale()
{
if (rescaled)
{
rescaled = false;
img.removeAttribute("style");
}
else
{
rescaled = true;
fit_to_screen();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.