Question

这就是我需要的：

图像必须完全填满div覆盖的区域 - 左边正确，从上到下。
图像不得被压扁或拉伸 - 只需裁剪或必须溢出。
图像必须保持尽可能小，所以无论调整大小 - 你仍然可以看到正面或顶部和底部。

div本身将调整高度和宽度，因为它们都是主窗口的百分比。

我在这里发现了一些JavaScript，它正在调整窗口大小时操作图像，但是在整个窗口中显示它。

<html> 
<head> 
<title>test</title> 

<script type="text/javascript"> 

function resizeImage() 
{ 
    var window_height = document.body.clientHeight 
    var window_width  = document.body.clientWidth 
    var image_width   = document.images[0].width 
    var image_height  = document.images[0].height 
    var height_ratio  = image_height / window_height 
    var width_ratio   = image_width / window_width 
    if (height_ratio > width_ratio) 
    { 
        document.images[0].style.width  = "100%" 
        document.images[0].style.height = "auto" 
    } 
    else 
    { 
        document.images[0].style.width  = "auto" 
        document.images[0].style.height = "100%" 
    } 
} 
</script> 

</head> 

<body onresize="resizeImage()"> 

<img onload="resizeImage()" src="f/a.jpg">   

</body> 
</html>

Here is a demo

请不要回答我所需要的只是：

<img style="width : 100%;">

这远不止于此。

解释起来并不容易，但请检查演示并拖动窗口的角落，这将是值得1000字......！

是否可以（或类似的东西）在％大小的div中以相同的方式工作？

Answer 1

我写了一个jQuery插件，正是这样做的。查看我的博文here和演示here

jQuery.fn.resizeToParent = function(options) {
  var defaults = {
   parent: 'div'
  }

  var options = jQuery.extend(defaults, options);

  return this.each(function() {
    var o = options;
    var obj = jQuery(this);

    // bind to load of image
    obj.load(function() {
      // dimensions of the parent
      var parentWidth = obj.parents(o.parent).width();
      var parentHeight = obj.parents(o.parent).height();

      // dimensions of the image
      var imageWidth = obj.width();
      var imageHeight = obj.height();

      // step 1 - calculate the percentage difference between image width and container width
      var diff = imageWidth / parentWidth;

      // step 2 - if height divided by difference is smaller than container height, resize by height. otherwise resize by width
      if ((imageHeight / diff) < parentHeight) {
       obj.css({'width': 'auto', 'height': parentHeight});

       // set image variables to new dimensions
       imageWidth = imageWidth / (imageHeight / parentHeight);
       imageHeight = parentHeight;
      }
      else {
       obj.css({'height': 'auto', 'width': parentWidth});

       // set image variables to new dimensions
       imageWidth = parentWidth;
       imageHeight = imageHeight / diff;
      }

      // step 3 - center image in container
      var leftOffset = (imageWidth - parentWidth) / -2;
      var topOffset = (imageHeight - parentHeight) / -2;

      obj.css({'left': leftOffset, 'top': topOffset});
    });

    // force ie to run the load function if the image is cached
    if (this.complete) {
      obj.trigger('load');
    }
  });
}

如果您希望在调整窗口大小时调整图像大小，只需将调整大小处理程序绑定到窗口：

$(window).resize(function() {
    $('img').resizeToParent();
});

Answer 2

好的，我一直在玩它：

<html>
<head>
<title>test</title>


<style>

#imgarea {
position:absolute;
right:0px;
height:75%;
width:70%;
top:25%;
}

</style>


<script type="text/javascript">

function resizeImage()
{
    var window_height = document.body.clientHeight
    var window_width  = document.body.clientWidth
    var image_width   = document.images[0].width
    var image_height  = document.images[0].height
    var area_width    = window_width * 0.7
    var area_height   = window_height * 0.75
    var height_ratio  = image_height / area_height
    var width_ratio   = image_width / area_width

    if (height_ratio > width_ratio)
    {
        document.images[0].style.width  = "100%"
        document.images[0].style.height = "auto"

    }
    else
    {
        document.images[0].style.width  = "auto"
        document.images[0].style.height = "100%"

    }
}
</script>

</head>

<body onresize="resizeImage()">
    <div id="imgarea">  
<img onload="resizeImage()" src="f/a.jpg">  
    </div>
</body>
</html>

当div调整大小时，它会不断调整大小 - 正如div所提到的那样用窗户调整大小 - 这个看起来很有效。
在IE9，Fire Fox，Oprea，Chrome和Safari之间似乎没问题超过xp和7

所以它真的很完美地回答了我的问题，它只是 - 现在我已经看到了Christian的居中版本，我希望我有专业知识可以做到这一点我已经尝试了一些东西，但现在卡住了。任何想法？

P.S。如果你不知道div的宽度和高度％，当你正确的脚本我觉得它可以用GetElementById得到 - 不知何故......虽然超出我;）

如何调整大小和裁剪/信箱图像以完全填充div与图像调整大小

2 个答案: