Question

HTML中是否可以将变换应用于div，以便它适合外部div？

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>

旁注

如果想让它相对于视口“缩放”，使用媒体查询（如在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>

Answer 2

仅限Firefox。将真实元素移到视口外部并将其显示为另一个视图的背景。

https://jsfiddle.net/3h2j2fu6/

#src {
  width: 400px;
  position: fixed;
  left: -9999px;
  top: -9999px;
}

#dest {
  height: 300px;
  width: 240px;
  border: 1px dotted;
  background: -moz-element(#src);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

<link rel="stylesheet" href="//cdn.sstatic.net/Sites/stackoverflow/all.css?v=cc9a1789687c">

<div id=dest></div>

<div id=src>
<div class="module community-bulletin" data-tracker="cb=1">
    <div class="related">
                <div class="bulletin-title">
                    Featured on Meta
                </div>
                <hr>
    <div class="spacer">
        <div class="bulletin-item-type">
                <a href="http://meta.stackexchange.com/questions/277369/preview-a-tos-update-restricting-companies-that-scrape-your-profile-information?cb=1" class="question-hyperlink">
<div class="favicon favicon-stackexchangemeta" title="Meta Stack Exchange"></div>                </a>
            </div>
                <div class="bulletin-item-content">
                    <a href="http://meta.stackexchange.com/questions/277369/preview-a-tos-update-restricting-companies-that-scrape-your-profile-information?cb=1" title="Preview: A ToS update restricting companies that scrape your profile information without your permission" class="question-hyperlink">Preview: A ToS update restricting companies that scrape your profile informat…</a>
                </div>
                <br class="cbt">
            </div>
    <div class="spacer">
        <div class="bulletin-item-type">
                <a href="http://meta.stackoverflow.com/questions/319319/documentation-the-update-en-ing?cb=1" class="question-hyperlink">
<div class="favicon favicon-stackoverflowmeta" title="Meta Stack Overflow"></div>                </a>
            </div>
                <div class="bulletin-item-content">
                    <a href="http://meta.stackoverflow.com/questions/319319/documentation-the-update-en-ing?cb=1" class="question-hyperlink">Documentation: The Update-en-ing</a>
                </div>
                <br class="cbt">
            </div>
    <div class="spacer">
        <div class="bulletin-item-type">
                <a href="http://meta.stackoverflow.com/questions/319524/the-developer-story-private-beta-has-started?cb=1" class="question-hyperlink">
<div class="favicon favicon-stackoverflowmeta" title="Meta Stack Overflow"></div>                </a>
            </div>
                <div class="bulletin-item-content">
                    <a href="http://meta.stackoverflow.com/questions/319524/the-developer-story-private-beta-has-started?cb=1" class="question-hyperlink">The Developer Story: Private Beta has started!</a>
                </div>
                <br class="cbt">
            </div>
                <div class="bulletin-title">
                    Hot Meta Posts
                </div>
                <hr>
    <div class="spacer">
        <div class="bulletin-item-type">
                <span title="Vote score (upvotes - downvotes)">10</span>
            </div>
                <div class="bulletin-item-content">
                    <a href="http://meta.stackoverflow.com/questions/320478/confusing-review-regarding-moderator-flags?cb=1" class="question-hyperlink">Confusing review regarding moderator flags</a>
                </div>
                <br class="cbt">
            </div>
    <div class="spacer">
        <div class="bulletin-item-type">
                <span title="Vote score (upvotes - downvotes)">12</span>
            </div>
                <div class="bulletin-item-content">
                    <a href="http://meta.stackoverflow.com/questions/320424/what-should-i-do-if-an-existing-answer-was-wrong?cb=1" class="question-hyperlink">What should I do if an existing answer was wrong?</a>
                </div>
                <br class="cbt">
            </div>
    </div>
</div>
</div>

转换div以适合容器

2 个答案: