Ölçeklendirilmiş DIV bölümü kapsayıcısına uymuyor

Aşağıdaki komut dosyasını, html gövde içeriğini küçük bir tekil div olarak kopyalamak için kullanıyorum. Beni sıkan neÖlçeklendirilmiş DIV bölümü kapsayıcısına uymuyor

window.onload = function() { 
    //A container to hold screenshot div 
    var container = document.createElement('div'); 
    container.id ="container"; 
    container.style.width = "60%"; 
    container.style.height = "200px"; 
    container.style.border = "2px dotted red"; 

    //screenshot div 
    var div = document.createElement('div'); 
    div.style.width = getStyle(document.body, 'width'); 
    container.appendChild(div); 
    document.body.appendChild(container); 

    //copy body contents to screenshot div 
    var clonedBody = document.body.cloneNode(true); 
    while (clonedBody.childNodes.length > 0) { 
    div.appendChild(clonedBody.childNodes[0]); 
    } 
    for (var i=0; i<clonedBody.style.length; i++) { 
    var propName = clonedBody.style[i]; 
    div.style[propName] = clonedBody.style[propName]; 
    }; 

    //scale screenshot div 
    var orgWidth = parseFloat(getStyle(document.body, 'width')); 
    var newWidth = parseFloat(getStyle(container, 'width')); 
    var ratio = newWidth/orgWidth; 
    div.style.transform = "scale("+ratio+")"; 
}

aşağıdaki resimdeki görüldüğü gibi ölçekli bölümün kendine kaba sığmayan olmasıdır.

Resimde gördüğünüz gibi, ölçekli div'in kırmızı noktalı kutuya sığmasını istiyorum.

Imgur

Ben bazı basit css eksik ve yardıma ihtiyacı am düşünüyorum. İşte

http://plnkr.co/edit/aFqo14?p=preview

kaynak

2016-04-03 allenhwkim

daha yolu vardır İhtiyacınıza göre bu resmi kırmızı noktaya sığdırdım, tek bir şekilde yaptım ve cevabım olarak ekledi. lütfen kontrol edin –

Sadece bunu istediğiniz gibi yapmak için yalnızca bir css satırı eksik. transform genellikle, özgün öğede karşı çalıştığı bir referans noktasına sahiptir. Örneğin, rotate() işlevinin dönüştürme kaynağı dönme merkezidir.

varsayılan davranışını değiştirmek için, css için bu ekleyebilirsiniz:

transform-origin: top left;

bu öğe orijinal sol üst köşesini referans yapacaktır.

Eğer ekleyerek javascript bunu yapabilir: Burada

div.style.transformOrigin = "top left" sabit senin kod:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script> 
 
    // ref. https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle 
 
    function getStyle(elem, prop) { 
 
    var styles = window.getComputedStyle(elem, null); 
 
    var value = styles.getPropertyValue(prop); 
 
    if (!value) { 
 
     throw "Could not get style for " + prop; 
 
    } 
 
    return value 
 
    } 
 
    
 
    window.onload = function() { 
 
     //A container to hold screenshot div 
 
     var container = document.createElement('div'); 
 
     container.id ="container"; 
 
     container.style.width = "60%"; 
 
     container.style.height = "200px"; 
 
     container.style.border = "2px dotted red"; 
 
     container.style.overflow = "hidden"; 
 
     
 
     //screenshot div 
 
     var div = document.createElement('div'); 
 
     div.style.width = getStyle(document.body, 'width'); 
 
     container.appendChild(div); 
 
     document.body.appendChild(container); 
 
    
 
     //copy body contents to screenshot div 
 
     var clonedBody = document.body.cloneNode(true); 
 
     while (clonedBody.childNodes.length > 0) { 
 
     div.appendChild(clonedBody.childNodes[0]); 
 
     } 
 
     for (var i=0; i<clonedBody.style.length; i++) { 
 
     var propName = clonedBody.style[i]; 
 
     div.style[propName] = clonedBody.style[propName]; 
 
     }; 
 
     
 
     //scale screenshot div 
 
     var orgWidth = parseFloat(getStyle(document.body, 'width')); 
 
     var newWidth = parseFloat(getStyle(container, 'width')); 
 
     var ratio = newWidth/orgWidth; 
 
     div.style.transform = "scale("+ratio+")"; 
 
     div.style.transformOrigin = "top left"; /* ADDED! */ 
 
    } 
 
    </script> 
 
</head> 
 

 
<body style="background: url(http://placekitten.com/640/480) no-repeat"> 
 
    <img src="http://placekitten.com/100/100" /> 
 
    <p style="color:#fff">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
</body> 
 
</html>

diğer bilgiler hakkında tranform-origin: https://developer.mozilla.org/en/docs/Web/CSS/transform-origin

kaynak

2016-04-03 15:42:55 Thatkookooguy

Teşekkürler. Cevabınızı kendi cevabımı kabul etmek yerine kabul edeceğim. – allenhwkim

teşekkürler, @allenhwkim! :-) – Thatkookooguy

cehennem, ben bu görüntü için arka plan boyutunu kullanmış ve

i eğer sonuna

// div.style.transform = "scale("+ratio+")"; 
div.style["background-size"] = "345px"; 
div.style["height"] = "200px";

aşağıdaki js kullanılan, iyi çalıştı, plunker olduğunu arka plan boyut özelliğini kullanmak istemiyorum, daha sonra 345px genişliğinde ang 200px yüksekliğinde veya orantılı görüntüyü kullanın ve görüntü genişliği css'yi% 100 olarak kullanın.

Eğer yardımcı olur bana bildirin .. teşekkürler

kaynak

2016-04-03 15:37:27

"ölçekli div konumlandırma" İşte

googling tarafından cevap Bulunan Kaçırdığım ne plunker http://plnkr.co/edit/k27ph6?p=preview

div.style.transformOrigin = "0 0";

//screenshot div 
var div = document.createElement('div'); 
div.style.width = getStyle(document.body, 'width'); 
div.style.transformOrigin = "0 0"; // <--- this line 
container.appendChild(div); 
document.body.appendChild(container);

oldu ise

kaynak

2016-04-03 15:40:56 allenhwkim

Ölçeklendirilmiş DIV bölümü kapsayıcısına uymuyor

cevap

İlgili konular