将图像调整为浏览器大小，按比例检查宽度和高度
[英]resize image to browser proportionally checking width and height
问题描述
I'm building a fluid website in which an image must scale to a maximum size depending on the viewport of the browser (minus some margins). 
我正在建立一个流畅的网站，在该网站中，图像必须根据浏览器的视口缩放到最大尺寸（减去一些边距）。 I don't want the image to crop or lose its original proportions, so depending on the width or height it should resize to the maximum size possible without cropping. 我不希望图像裁切或丢失其原始比例，因此应根据宽度或高度将其调整为可能的最大尺寸，而不进行裁切。
I wrote some javascript code, but since I'm not a hardcore coder I was wondering how to fix this in the right way. 我写了一些JavaScript代码，但是由于我不是一名硬核编码员，所以我想知道如何以正确的方式解决此问题。 The script works, but has a bug when resizing. 该脚本有效，但是在调整大小时存在错误。 It seems that it only processes one if statement when resizing the browser window. 调整浏览器窗口大小时，似乎只处理一个if语句。
function setSizes() {
var margin_top = 100;
var margin_right = 85;
var margin_bottom = 10;
var margin_left = 85;
// get image width and height
var img_w = $('.gallery_img').width();
var img_h = $('.gallery_img').height();
// calculate viewport width and height
var vp_w = $(window).width() - margin_right - margin_left;
var vp_h = $(window).height() - margin_top - margin_bottom;
//
if (vp_w <= img_w || vp_w > img_w) {
// new width
var img_w_new=vp_w;
// calculate new height
var img_h_new=Math.round((img_h*img_w_new) / img_w);
}
//
if (vp_h <= img_h || vp_h > img_h) {
// new height
var img_h_new=vp_h;
// calculate new width
var img_w_new=Math.round((img_w*img_h_new) / img_h);
}
// change image width and height to new width and new height
$('.gallery_img').width(img_w_new);
$('.gallery_img').height(img_h_new);
}
// onload
$(window).load(function(){ setSizes(); });
// on resize
$(window).bind("resize", function() { setSizes(); });
I searched for a solution for quite some time, but most scripts I found only check and change the width. 我搜索解决方案已有一段时间，但发现的大多数脚本仅检查并更改宽度。
Does somebody know how to fix this? 有人知道如何解决这个问题吗？
Thanx! 谢谢！
5 个解决方案
解决方案1
5 2011-11-17 16:31:11
this might be a lame answer but why don't you just use css width setting? 这可能是一个me脚的答案，但是为什么不只使用CSS宽度设置呢？ see http://jsfiddle.net/dXm4r/ 参见http://jsfiddle.net/dXm4r/
解决方案2
2 2011-11-17 16:35:25
I think this is a wrong approach? 我认为这是错误的做法？ It would be more natural to define width of enclosing container in percents and than define width 100% on image. 用百分比定义封闭容器的宽度，而不是在图像上定义宽度100％，将是更自然的选择。 Something like this: 像这样：
div.img-container {
width: 30%;
}
div.img-container img {
display: block;
width: 100%;
}
<div class="img-conatiner">
<img src="...
</div>
Please pay attention to the fact that in img CSS rule there is no height specified, this will allow browsers to properly scale image without loosing quality. 请注意，在img CSS规则中未指定高度，这将允许浏览器正确缩放图像而不会降低质量。
解决方案3
0 2012-08-16 21:20:23
解决方案4
0 2016-10-15 06:18:13
you can done it by css ,just apply this css to your image element 您可以通过CSS完成此操作，只需将此CSS应用于图像元素
.img { /* image*/ position: absolute; top: 10px; right: 85px; bottom: 10px; left: 85px; width: calc( 100% - 170px); /* 170 = marging left + right*/ height: calc(100% - 20px); /* 20px = marging top + bottomt*/ background-size: cover; box-sizing: border-box; padding: 0px; } body { /* container*/ margin: 0px; padding: 0px; height: 100% width:100%; overflow:hidden; }
<html> <body> <img class="img" src="http://kingofwallpapers.com/picture/picture-004.jpg" > </img> </body> </html>
解决方案5
0 2011-11-17 16:45:58
You have a line to change the width; 您可以用一条线更改宽度； simply add a line to change the height, based on your height variable. 只需根据您的height变量添加一条线即可更改高度。 You can figure out what the height should be by dividing the new width by the old width. 您可以通过将新宽度除以旧宽度来算出高度。 Basically, that is the multiple of widths in the new width, which is equal to the multiple of heights in the new height. 基本上，这是新宽度中宽度的倍数，它等于新高度中的高度倍数。 Therefore, if you multiply that number to the old height, you would get the new height. 因此，如果将该数字乘以旧的高度，则将获得新的高度。
Here is the equation you could use: 这是您可以使用的方程式：
img_h_new = (img_w_new / img_w) * img_h;
And this is the function you could use with your width function: 这是可以与width函数一起使用的函数：
$('.gallery_img').height(img_w_new);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.