Преобразование div для вставки в контейнер

Question

Возможно ли в HTML применить преобразование к div, чтобы оно входило в внешний div?

Answer 1

Только 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>

Answer 2

Если я вас понял правильно, вы можете сделать так

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>