javascript - CSS:如果 p 的高度覆盖，则增加父宽度

Question

我有一个 100% 窗口的图像。我在里面有一个绝对定位的 div(带有 caption 类)，它显示标题和一些文本。此标题的 min-width 为 36%。我的网站如果完全响应。

我正在使用媒体查询重新定位平板电脑和手机上的标题。但是，有时 item 中的文本太大 - 标题的高度大于图像。

我正在使用以下代码使用 javascript 修复此问题，但感觉有很大问题(当用户调整浏览器大小时它不起作用):

window.onload = function(){
  setWidth();
};

var count = 0;
function setWidth() {
    $('.item').each(function() {
        if ( $(this).find('.caption')[0].scrollHeight >  $(this).height() && count <= 100) {
            $(this).find('.caption').css('width', $(this).find('.caption').width() + 10);
            count++;
            setWidth();
        }
    });
}

有没有一种方法可以仅使用 css 实现相同的效果。 caption 上的 max-height 为 100%，min-width 为 36% 并且宽度会随着高度的变化而相应变化标题更改。

Answer 1

如果您的示例没有标记，很难看出 CSS 是否可行。至于 JavaScript，您想将 resize 函数附加到 window.onresize 事件，只要调整窗口大小时就会调用它。

See example on JSFiddle

window.onresize = updateDimensions;

function updateDimensions(e) {
    document.getElementById('width').innerHTML = window.innerWidth;
    document.getElementById('height').innerHTML = window.innerHeight;
}

updateDimensions();