Question

示例：

计算时遇到问题，根据容器的宽度自动调整元素图像的宽度和元素文本的字体大小。就像，

$('.element-image').width() = $('.container').width() - $('.element-image').width();
$('.element-text').css('font-size') = $('.container').width() - $('.element-text').css('font-size');
<div class="container">
    <img class="element-image" src="sample.jpg" />
    <span class="element-text">Sample Text</span>
</div>

类似的东西，但我无法得到逻辑。有人可以帮忙吗？请注意，这适用于我的网络应用，它就像广告或图片制作工具。

以下是示例应用： https://drive.google.com/file/d/1dnsRg6TjLqUx6IzgLwOYq5uNJrrx7dUv/view?usp=drivesdk

Answer 1

你不必用jquery来做。你可以使用CSS width:100%;或任何百分比，它将生成一个宽度与其父宽度相符。

选中 DEMO 以了解。

Answer 2

缩放图像非常简单，只需使用百分比宽度。

缩放文字更难。您可以使用视口单元根据窗口大小缩放文本：

＆＃13;

.element-text {
  font-size: 10vw
}

＆＃13;

  <span class="element-text">Sample Text</span>
  <div>Unscaled text (put this snippet in "fullscreen" mode and change the window size to see the effect)</div>

＆＃13;

...但是如果您需要将文字缩放到精确的容器大小，那么您需要使用javascript。以下是一种（一种愚蠢的）方法，用于设置字体大小以匹配容器大小 - 你不会在现实生活中使用短间隔轮询，并且可能做一些比简单地递增/递减更聪明的事情。每一步的字体大小，但这足以证明该技术：

＆＃13;

window.setInterval(function() { // In real life you'd likely use the window resize event

  var ewidth = $('.element-text').width();
  var cwidth = $('.container').width();
  var fontsize = parseInt($('.element-text').css("font-size"));
  // change font size if the text block doesn't match the container width
  if (ewidth > cwidth - 20) { // leave a little extra space to prevent jitter
    $('.element-text').css("font-size", --fontsize);
  } else if (ewidth < cwidth ) {
    $('.element-text').css("font-size", ++fontsize);
  }
}, 1);

＆＃13;

.container {
  resize: both;
  overflow: hidden;
  border: 1px solid;
  width: 20px;
}

.element-image {
  width: 100%
}

.element-text {
  white-space: nowrap
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Resize me:
<div class="container">
  <span class="element-text">Sample Text</span>
  <img class="element-image" src="http://placehold.it/200x200" />

</div>

＆＃13;

This jQuery plugin使用了相同的技术。在其源代码中是以下注释块：

        // I understand this is not optimized and we should
        // consider implementing something akin to
        // Daniel Hoffmann's answer here:
        //
        //     http://stackoverflow.com/a/17433451/1094964
        //

......这可能是我发现potential question duplicate最迂回的方式。（显然，我需要更多关注＆＃34;相关问题＆＃34;列表，因为它位于其顶部......）

Answer 3

我没有真正得到你需要的东西，但我正在修复你的jquery

var contwidth = $('.container').width();
var imgwidth = $('.element-image').width();
$('.element-image').width(contwidth - imgwidth);
$('.element-text').css('font-size',contwidth - imgwidth);

<div class="container">
    <img class="element-image" src="sample.jpg" />
    <span class="element-text">Sample Text</span>
</div>

顺便提一下，当你改变图像的宽度时，计算容器宽度的逻辑是什么 - 图像宽度？这将是一个错误，因为当你试图获得图像的宽度时，另一个函数会改变它。永无止境的循环。

根据容器大小自动调整元素大小，而不使用缩放

3 个答案: