缩放图像以按比例调整其父对象

时间:2015-11-16 01:03:30

标签: javascript

I realise this has been asked many times under {{ 3}} many,但大多数解决方案似乎并不关心产生的图像高度,或只关注一个方向的比例。这样:

min-width: 100%;
height: auto;

不是解决方案。

我试图将图像调整到高度和宽度,以便可以将其动态注入不同系统和站点的许多位置,因此我不必知道父对象是什么将来 - 可能是有或没有溢出集,或ap,或身体 - 或其维度的div;父容器不能仅通过注入我的图像/脚本来改变大小.jQuery不可用。

我无法看到css3背景技术如何运作。

比例缩放就像使用比例一样简单:

<img onload="scale(this)" src="screenshot.png">
<script type="text/javascript">
function scale(img){
var p = img.parentNode,
    x = p.offsetWidth,
    y = p.offsetHeight,
    w = img.naturalWidth,
    h = img.naturalHeight;
    ratio = h / w;
    if (h >= y) {
        h = y;
        w = h / ratio;
        img.style.width = w + "px";
        img.style.height = h + "px";
    } else if(w >= x) {  //} && ratio <= 1){
        w = x;
        h = w * ratio;
        img.style.width = w + "px";
        img.style.height = h + "px";
    }
}
</script>

但这仅在一个平面上缩放 - 我需要它继续扩展宽度和高度,直到它在两个维度上整齐地适合父容器空间。如果图像小于父容器,则应按比例缩放以按比例填充。

2 个答案:

答案 0 :(得分:3)

调整图像以适合父容器(未知大小)而不拉伸图像

<小时/> 而不是搞乱JS,让CSS完成工作!

  • 将图片设置为100%; 高度和宽度;
  • 将图片的src替换为透明像素,并将其背景设置为实际的src
  • 在您(现在)的全尺寸图片上使用CSS background-size

contain(图片将完全覆盖父母)
cover(图片会反对图片比例)

使用contain

的示例

function scale( img ) {
  if(img.isScaled) return;
  img.style.background="no-repeat url("+ img.src +") 50%";
  img.style.backgroundSize="contain";  // Use "contain", "cover" or a % value
  img.style.width="100%";
  img.style.height="100%";
  img.isScaled=true; // Prevent triggering another onload on src change
  img.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
}
<div style="width:300px; height:300px; background:#000; margin:10px;">
  <img onload="scale(this);" src="//placehold.it/1200x600/f0f">
</div>


<div style="width:300px; height:300px; background:#000; margin:10px;">
  <img onload="scale(this);" src="//placehold.it/400x600/cf5">
</div>

经测试:FF,CH,E,IE(11),SA

注意: 透明像素数据仅用于防止浏览器的缺少Iimage图标img.src = "";

引起的

http://caniuse.com/#search=background-size

答案 1 :(得分:0)

我使用此代码将视频合并到其父级:

      var parent = vid.parentNode,
      vw = vid.videoWidth,
      vh = vid.videoHeight,
      vr = vh / vw, // video ratio
      pw = parent.offsetWidth,
      ph = parent.offsetHeight,
      pr = ph / pw; // parent ratio
      if(pr > vr) {
        vid.style.width = 'unset';
        vid.style.height = `${ph}px`;
      } else {
        vid.style.height = 'unset';
        vid.style.width = `${pw}px`;
      }