Question

我正在构建一个流畅的网站，其中图像必须根据浏览器的视口（减去一些边距）缩放到最大尺寸。我不希望图像裁剪或丢失其原始比例，因此根据宽度或高度，它应调整到可能的最大尺寸而不会裁剪。

我写了一些javascript代码，但由于我不是一个核心编码器，我想知道如何以正确的方式解决这个问题。该脚本有效，但调整大小时有错误。它似乎只在调整浏览器窗口大小时处理一个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(); });

我搜索了一段时间的解决方案，但我找到的大多数脚本只检查并更改了宽度。

有人知道如何解决这个问题吗？

感谢名单！

Answer 1

这可能是一个蹩脚的答案，但你为什么不使用css宽度设置？见http://jsfiddle.net/dXm4r/

Answer 2

我认为这是一种错误的做法？以百分比定义封闭容器的宽度并在图像上定义宽度100％更自然。像这样：

    div.img-container {
      width: 30%;
    }

    div.img-container img {
      display: block;
      width: 100%;
    }

    <div class="img-conatiner">
      <img src="...
    </div>

请注意，在img CSS规则中没有指定高度，这将允许浏览器正确缩放图像而不会降低质量。

Answer 3

你有一条线来改变宽度;只需根据您的高度变量添加一行来更改高度。您可以通过将新宽度除以旧宽度来确定高度应该是多少。基本上，这是新宽度中的宽度的倍数，其等于新高度中的高度的倍数。因此，如果将该数字乘以旧高度，您将获得新的高度。

以下是您可以使用的公式：

img_h_new = (img_w_new / img_w) * img_h;

这是您可以使用宽度函数的函数：

$('.gallery_img').height(img_w_new);

Answer 4

http://blog.francois-becker.net/post/2012/08/16/HTMLCSS-container-of-a-maximized-image

Answer 5

你可以通过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 个答案: