CSS line-height和font-size：相對於容器收縮嗎？

我創建了一個相冊生成器，一個人可以添加照片和文本，並按照他的感覺操縱它們。CSS line-height和font-size：相對於容器收縮嗎？

我的要求之一是調整屏幕大小以適應不同的比例和分辨率，因此圖像和文本需要適合任何屏幕和尺寸。

與一個圖像很容易，我只是一個立場：絕對;相對於頁面，但我似乎無法得到我的頭如何使這與字體大小和行高。

我這裏的問題有一個例子，我有：（請注意，以600 300大小之間的差值）

var def = 400; 
 
var fontsize = 20; 
 
var lineHeight = 20; 
 

 
var init = function() { 
 
    var val = document.getElementById('val'); 
 
    val.onchange = function() { 
 
    var value = parseInt(this.value); 
 
    if (!isNaN(value)) { 
 
     var diff = (def/value) * 100; 
 

 
     document.getElementById('wrap').style.fontSize = ((fontsize/diff) * 100) + 'px'; 
 
     document.getElementById('container').style.lineHeight = ((lineHeight/diff) * 100) + 'px'; 
 

 
     document.getElementById('container').style.width = value + 'px'; 
 
     document.getElementById('container').style.height = value + 'px'; 
 
    } 
 
    } 
 
}

.wrap { 
 
    font-size: 20px; 
 
} 
 

 
.container { 
 
    width: 400px; 
 
    height: 400px; 
 
    background-color: #eee; 
 
    line-height: 20px; 
 
} 
 

 
.container p { 
 
    font-size: 1em; 
 
    line-height: inherit; 
 
}

<html> 
 

 
<head> 
 
    <style> 
 

 
    </style> 
 
</head> 
 

 
<body onload="init();"> 
 

 
<h1>switch between 300 and 600 values to see how the line breaks and is not resized in synced with its parent</h1> 
 
    <input id="val" type="text" value="400" /> 
 

 
    <div id="wrap" class="wrap"> 
 
    <div id="container" class="container"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur risus in cursus ullamcorper. Quisque volutpat neque sed vestibulum iaculis. Quisque luctus mollis euismod. Fusce pharetra dictum justo, ac volutpat leo sollicitudin sed. 
 
     Nunc pellentesque nibh vulputate urna hendrerit convallis. Praesent eleifend rutrum odio eget facilisis. Nulla placerat ultricies erat.</p> 
 
     <p>Quisque eget sagittis massa. Cras scelerisque molestie sollicitudin. Nulla vehicula, sem vel lacinia varius, lacus orci iaculis neque, at lacinia mi nulla rutrum velit. Mauris pulvinar sem sit amet tempus dapibus. Duis augue tortor, ullamcorper 
 
     ac erat sed, cursus fermentum ex. Maecenas mattis felis nec aliquam imperdiet. Integer eget accumsan ante, eget maximus nunc.</p> 
 
    </div> 
 
    </div> 
 

 
    <script type="text/javascript"> 
 
    </script> 
 
</body> 
 

 
</html>

來源

2017-06-18 Roey Zada

您需要發佈您的最小的標記，這裏顯示的問題，不是你的網站，其未來將改變有助於對未來沒有一個：https://stackoverflow.com/help/mcve – Rob

你可以這個JS插件。 http://fittextjs.com/如果你只需要通過CSS來做，嘗試使用vw或vh作爲單位，但不能100％確定它是否工作:) – shinyatk

你必須調整一些東西，因爲文本框的高度大於的背景。嘗試找到這個類的「塊text_object移動器selected_up」和改變「高度」屬性爲100％和「頂部」屬性爲0.其他屬性如果是必要的。 –

這樣做的一個簡單的方法可以是使用transform: scale 。

它會產生相同的縮放結果跨瀏覽器。

var def = 400; 
 
var init = function() { 
 
    var val = document.getElementById('val'); 
 
    val.onchange = function() { 
 
    var value = parseInt(this.value); 
 
    if (!isNaN(value)) { 
 
     var diff = (value/def); 
 
             /* changed property and value */ 
 

 
     document.getElementById('wrap').style.transform = 'scale('+diff+')'; 
 
    } 
 
    } 
 
}

.wrap { 
 
    font-size: 20px; 
 
    transform-origin: left top;   /* added property */ 
 
} 
 

 
.container { 
 
    width: 400px; 
 
    height: 400px; 
 
    background-color: #eee; 
 
    line-height: 20px; 
 
} 
 

 
.container p { 
 
    font-size: 1em; 
 
    line-height: inherit; 
 
}

<body onload="init();"> 
 
<h1>switch between 300 and 600 values to see how the line breaks and is not resized in synced with its parent</h1> 
 
    <input id="val" type="text" value="400" /> 
 

 
    <div id="wrap" class="wrap"> 
 
    <div id="container" class="container"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur risus in cursus ullamcorper. Quisque volutpat neque sed vestibulum iaculis. Quisque luctus mollis euismod. Fusce pharetra dictum justo, ac volutpat leo sollicitudin sed. 
 
     Nunc pellentesque nibh vulputate urna hendrerit convallis. Praesent eleifend rutrum odio eget facilisis. Nulla placerat ultricies erat.</p> 
 
     <p>Quisque eget sagittis massa. Cras scelerisque molestie sollicitudin. Nulla vehicula, sem vel lacinia varius, lacus orci iaculis neque, at lacinia mi nulla rutrum velit. Mauris pulvinar sem sit amet tempus dapibus. Duis augue tortor, ullamcorper 
 
     ac erat sed, cursus fermentum ex. Maecenas mattis felis nec aliquam imperdiet. Integer eget accumsan ante, eget maximus nunc.</p> 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-06-18 17:55:59 LGSon

天才！作品完美。你是我的導師。（; –

CSS line-height和font-size：相對於容器收縮嗎？

回答

相關問題