每当浏览器宽度足够宽时,我都会尝试创建具有响应性的HTML元素,它会填充3个水平框元素,其内容可以是文本或图像。当文本内容没有填满整个框时,它会留下一些空白,这样它就不会绕过框。
但是,文本内容可以填充该框。无论框是否已填充,除非浏览器尺寸发生更改,否则框应具有相同的尺寸。
当浏览器尺寸标注加宽时,这3个图元应保留原始尺寸标注。但是当它变窄时,3个水平元素可以减少到2个水平元素,而其他元素则留出新的空间。如果浏览器空间足够窄,它可以是1个水平元素。
可以有多个3个水平元素,如下所示:
X X X
X X X
X X X
它们堆得像一张桌子。当内容是图像时,其大小必须符合框的尺寸,而不是相反的尺
我正在尝试调整HTML页面上某些项目的尺寸以适应窗口的大小。我知道使用JQuery可以很容易地做到这一点,如下所示:
$(window).resize(function(){
var width = $(this).width();
$(item).css('height',(height * w / h)+ 'px'); // w and h are variables used to calculate the ratio
});
然而,我正在寻找一种方法来做与CSS。我有一个居中的项目,它占据了窗口宽度的40%。因此,当窗口的宽度减