1

我有一个 100% 的窗口图像。在里面我有一个绝对定位的 div （带有 class caption），它显示一个标题和一些文本。这个标题有min-width36%。我的网站如果完全响应。

我正在使用媒体查询在平板电脑和手机上重新定位标题。但是，有时里面的文字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 来实现相同的效果。max-height上的东西caption是 100%，min-width是 36%，宽度会随着标题高度的变化而相应变化。

4

1 回答 1

0

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

请参阅 JSFiddle 上的示例

window.onresize = updateDimensions;

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

updateDimensions();
于 2013-03-03T02:54:40.940 回答