मैं एक div को स्केल करने के लिए CSS ट्रांसफॉर्म: स्केल (0.6) का उपयोग कर रहा हूं। जब तत्व को छोटा किया जाता है, तो यह अपने पहलू अनुपात को बनाए रखता है। हालांकि, मेरे मामले में, इस तत्व को हमेशा ऊंचाई की आवश्यकता होती है जो व्यूपोर्ट के नीचे तक पहुंच जाएगी। इसका मतलब है कि मुझे इसकी चौड़ाई और शीर्ष स्थिति को समान रखते हुए तत्व की ऊंचाई को समायोजित करने की आवश्यकता है।
मैं उस ऊंचाई की गणना कैसे करूं जिसे मुझे लागू करने की आवश्यकता है ताकि तत्व व्यूपोर्ट के नीचे तक पहुंच जाए जब ट्रांसफॉर्म: स्केल (एक्स) लागू हो?
नीचे एक कोडनिपेट है। कहीं भी क्लिक करने से div नीचे आ जाता है और यह तब होता है जब मुझे समान चौड़ाई और स्थिति रखते हुए div ऊंचाई को व्यूपोर्ट के नीचे तक पहुंचने की अनुमति देने के लिए नई ऊंचाई लागू करनी चाहिए।
document.body.addEventListener('click', () => {
document.querySelectorAll('div')[0].style.transform = 'scale(0.44)';
});body {
margin: 0;
padding: 0;
height: 100vh;
}
div {
width: 350px;
height: calc(100% - 50px);
position: absolute;
top: 50px;
background-color: red;
position: absolute;
transform-origin: top;
}<div><h1>TEST</h1></div>2 जवाब
चूंकि आप चाहते हैं कि डिव की ऊंचाई नीचे तक फैले, आप यहां window.innerHeight का उपयोग कर सकते हैं।
नई ऊंचाई की गणना निम्न सूत्र का उपयोग करके की जा सकती है: -
newHeight = (viewportHeight - offsetTop)*(1/scaleValue)
मूल्यों में डालने पर यह निम्नलिखित गणना में आ जाएगा: -
newHeight = (window.innerHeight - div.offsetTop)*(1/0.44)
document.body.addEventListener('click', () => {
const div = document.querySelectorAll('div')[0];
div.style.transform = 'scale(0.44)';
div.style.height = `${(window.innerHeight-div.offsetTop)*(1/0.44)}px`
});body {
margin: 0;
padding: 0;
height: 100vh;
}
div {
width: 350px;
height: calc(100% - 50px);
position: absolute;
top: 50px;
background-color: red;
position: absolute;
transform-origin: top;
}<div>
<h1>TEST</h1>
</div>मैं देख रहा हूं कि आप इसे ऊपर से स्थिति में रखते हैं। मुझे लगता है कि यदि आप इसे नीचे से रखते हैं तो आपको वह मिलेगा जो आप चाहते हैं।
ऊपर से नीचे बदलें: 0px
ट्रांसफॉर्म-ओरिजिन को ट्रांसफॉर्म-ओरिजिन में बदलें: बॉटम
और ऊंचाई की गणना के लिए आप १००% के बजाय १००VH का उपयोग कर सकते हैं