按比例缩放图像以适合其父 object

Question

我意识到这已经以多种形式被问过很多次， 但是大多数解决方案似乎并不关心最终的图像高度，或者只在一个方向上缩放。 这个：

min-width: 100%;
height: auto;

不是解决方案。

我正在尝试使图像适合高度和宽度，以便它可以动态注入到不同系统和站点中的多个位置，所以我不一定知道父 object 将是什么 - 可能是div 有或没有溢出集，或 ap，或主体 - 或其尺寸； 父容器不能仅仅通过注入我的图像/脚本来改变大小。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>

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

Answer 1

调整图像以适合父容器（大小未知）而无需拉伸图像

---

让CSS胜任这一工作 ，而不是搞砸JS ！

• 将您的图片设置为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 = "";而引起img.src = "";

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

Answer 2

我使用以下代码将视频适合其父级：

      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`;
      }