看起来你在实现元素自适应容器宽度的过程中踩了几个小坑，我来帮你梳理下问题并给出可行的解决方案～

首先得指出你原来的计算逻辑里的两个核心问题：

• 语法错误：JavaScript里不能用元素.width() = 值这种赋值方式，正确的写法应该是调用方法传递参数或者设置样式属性
• 逻辑矛盾：你写的$('.container').width() - $('.element-image').width()，相当于让图片宽度等于容器宽度减去它自己当前的宽度，这会导致图片宽度变成容器宽度的一半（假设初始有宽度），完全不符合“根据容器宽度自适应”的预期；而且字号计算时，css('font-size')返回的是带单位的字符串（比如16px），直接做减法会得到NaN，根本无法生效。

下面给你两种解决方案，优先推荐纯CSS方案（更高效、易维护），复杂场景再用JS：

方案一：纯CSS实现（推荐） #

不需要写任何JS，用CSS的原生属性就能完美实现自适应：

图片自适应容器宽度 #

给图片设置宽度100%，高度自动，这样图片会自动填满容器宽度，同时保持原有比例不拉伸：

.container {
  /* 可以给容器设置最大宽度，避免太宽时图片失真 */
  max-width: 1200px;
  width: 100%;
}
.element-image {
  width: 100%;
  height: auto;
}

文本字号随容器宽度自适应 #

用clamp()函数结合相对单位，让字号在指定范围内随容器宽度动态变化：

.element-text {
  /* clamp(最小字号, 自适应值, 最大字号)，1vw等于视口宽度的1%，如果容器是全屏宽度直接用即可 */
  font-size: clamp(16px, 2vw, 24px);
}

如果容器不是全屏宽度，而是某个父元素的子容器，可以用CSS容器查询（现代浏览器都支持），根据容器的不同宽度区间设置字号：

.container {
  container-type: inline-size; /* 声明这是一个容器查询的容器 */
}

@container (width < 600px) {
  .element-text {
    font-size: 16px;
  }
}
@container (width >= 600px) and (width < 1000px) {
  .element-text {
    font-size: 20px;
  }
}
@container (width >= 1000px) {
  .element-text {
    font-size: 24px;
  }
}

方案二：JavaScript实现（适合复杂自定义逻辑） #

如果你的需求无法用纯CSS满足（比如需要更复杂的计算规则），可以用JS来实现，下面是修正后的代码：

// 定义自适应调整的函数
function adjustElements() {
  const container = document.querySelector('.container');
  const containerWidth = container.offsetWidth;
  
  // 调整图片宽度：这里设置为容器的100%，你可以根据需求修改比例（比如0.8就是80%）
  const image = document.querySelector('.element-image');
  image.style.width = `${containerWidth}px`;
  image.style.height = 'auto'; // 保持图片比例
  
  // 调整文本字号：自定义计算规则，这里是每50px容器宽度对应1px字号，同时限制最小16px、最大24px
  const text = document.querySelector('.element-text');
  let fontSize = containerWidth / 50;
  fontSize = Math.max(16, Math.min(24, fontSize)); // 限制字号范围
  text.style.fontSize = `${fontSize}px`;
}

// 页面加载时先执行一次
adjustElements();

// 监听窗口 resize 事件，实时调整
window.addEventListener('resize', adjustElements);

// 额外：如果容器宽度可能被其他JS动态修改，用MutationObserver监听容器样式变化
const container = document.querySelector('.container');
const observer = new MutationObserver(adjustElements);
observer.observe(container, { attributes: true, attributeFilter: ['style'] });

补充说明 #

如果你坚持用jQuery，正确的写法应该是这样的：

function adjustElements() {
  const containerWidth = $('.container').width();
  
  // 设置图片宽度
  $('.element-image').width(containerWidth).css('height', 'auto');
  
  // 计算并设置字号
  let fontSize = containerWidth / 50;
  fontSize = Math.max(16, Math.min(24, fontSize));
  $('.element-text').css('font-size', `${fontSize}px`);
}

内容的提问来源于stack exchange，提问作者Franz Lopez