html - 转换一个 div 以适应容器

Question

<分区>

Answer 1

如果我没理解错的话，你可以这样做

html, body {
  margin: 0;
}
.outer {
  width: 240px;
  height: 240px;
}
.inner {
  width: 480px;
  height: 480px;
  background: url(http://www.lorempixel.com/480/480/transport/8) no-repeat center;
  font-size: 36px;
  color: lime;
}
.outer .inner {
  transform: scale(0.5);
  transform-origin: 0 0;
}

<div>Scaled to fit</div>
<div class="outer">
  <div class="inner">Some text as well as an image</div>
</div>
<hr>
<div>Origiginal size below</div>
<div class="inner">Some text as well as an image</div>

边注

如果想要使其相对于视口(viewport)“缩放”，使用媒体查询(如 this sample )是一种方式，脚本是另一种方式。

---

更新了一个简单的脚本示例

function getWidth() { return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; }
(function(timeout,outer,scale) {
  scale = 600;   // manually defined base width where scale is 1:1
  inner = document.querySelector('.inner');
  outer = inner.parentElement;
  inner.style.transform = 'scale(' + getWidth() / 600 + ')';  
  
  // temp. while testing
  var temp = inner.textContent;
  inner.textContent = temp + ' ' + inner.style.transform;
  
  window.addEventListener("resize", function(e) {
    if ( !timeout ) {
      timeout = setTimeout(function() {
        timeout = null;
        resizeHandler(e);
      }, 66);
    }
  }, false);
  function resizeHandler(e) {
    inner.style.transform = 'scale(' + getWidth() / 600 + ')';
    // temp. while testing
    inner.textContent = temp + ' ' + inner.style.transform;
  }
}());

html, body {
  margin: 0;
}
.outer {
  width: 50vw;
  height: 50vw;
  border: 2px solid red;
  overflow: hidden;
}
.inner {
  width: 360px;
  height: 360px;
  background: url(http://www.lorempixel.com/480/480/transport/8) no-repeat center;
  font-size: 24px;
  color: lime;
}
.outer .inner {
  transform-origin: 0 0;
}

<div class="outer">
  <div class="inner">Some text as well as an image</div>
</div>