Question

我有一个固定宽度和高度的div，字体大小为16px，如下所示

<div id="mydiv" style="font-size:16px;height:40px;line-height:40px;width:160px;background:orange;text-align:center;">
  hello world
</div>

我有一个允许更改字体大小的输入文本

<input type="text" id="input">

<button> change size </button>

JS：

$('button').on('click', function(){

  var value = $('#input').val();

  $('#mydiv').css('font-size', value + 'px');

});

如果您输入30的大小，例如文本将不在div中，我想要实现的是保持比率，所以当字体大小更改时我希望div改变尺寸保持宽高比。我怎么能这样做？

https://jsfiddle.net/mody5/x6t2dn3e/1/

Answer 1

更改div时，您需要重新计算width height，line-height和font-size。通过仅更新其font-size，其他任何内容都不会改变。

$('button').on('click', function() {
  var div = $('#mydiv');

  // These methods return the value unit-less, so they'll be integers
  // if defined.
  var currentWidth = div.width();
  var currentHeight = div.height();

  // Parsing the values to make sure you got integers.
  var currentFontSize = parseInt(div.css('font-size'), 10);
  var currentLineHeight = parseInt(div.css('line-height'), 10);
  var value = parseInt($('#input').val(), 10);

  var newFontSize = value + 'px';

  // Here we keep the ratio between width and height, considering
  // the current and new font-size.
  var newWidth = ((currentWidth * value) / currentFontSize) + 'px';
  var newHeight = ((currentHeight * value) / currentFontSize) + 'px';
  var newLineHeight = ((currentLineHeight * value) / currentFontSize) + 'px';

  // Applying all the styles at once.
  div.css({
    fontSize: newFontSize,
    width: newWidth,
    height: newHeight,
    lineHeight: newLineHeight
  });
});

Demo

Answer 2

为什么不直接使用em值？这正是它的用途：相对于字体大小应用值...

.test {
  font-size:16px;
  height:2.5em;
  line-height:2.5em;
  width:10em;
  background:orange;
  text-align:center;
}

<div class="test">
  hello world
</div>

尝试更改字体大小，您将看到所有div正在增长。使用此网站可帮助您计算好的em值：http://pxtoem.com/

（这是你的更新jsfiddle：https://jsfiddle.net/x6t2dn3e/9/）

Answer 3

您可以在自己的风格中使用内联块和填充的组合。

这样的事情：

display:inline-block;padding:15px

请在此处查看更新的小提琴：https://jsfiddle.net/donal/p3hrctsf/2/

＆＃13;

$('button').on('click', function(){
	
  var value = $('#input').val();
  
  $('#mydiv').css('font-size', value + 'px');
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" style="display: inline-block; font-size:16px;padding: 15px;background:orange;text-align:center;">
  hello world
</div>

<br>

<input type="text" id="input">
<button>Change Font Size</button>

＆＃13;

当字体大小改变时保持div的比率

3 个答案: