CSS - 缩放元素和图像rel。到窗口大小使用%

时间:2013-01-22 00:36:13

标签: css positioning scale scaling percentage

我有一个1920x650的图像和一个左下角的透明水平矩形。我已设法使其与图像缩放。问题是我无法弄清楚如何使其缩放以使其失去更多的宽度。它与img完全一致。

.container{
    position: relative;
    width: 100%;
    height: 100%;}

.bg-img{
    display:block;
    position: relative;
    width: 100%;
    height: 100%;
    z-index:1;}

.transblock{
    position:absolute; 
    width:44%; 
    height:6%; 
    top:90%; 
    left:0%; 
    z-index:5;}

http://jsfiddle.net/FA7XE/2/ - 启动全屏,缩小窗口 - 框和&文字向中间漂移太多。 (它与图像完美匹配,在这种情况下这是一件坏事:()。我希望它相对于下面的菜单保持原位。任何想法如何做到这一点?谢谢!

1 个答案:

答案 0 :(得分:2)

用于显示绿色矩形的容器和文本使用过程宽度。查看CSS,您将看到没有为父元素指定固定宽度。这将转换为采用体宽值并使用它来计算尺寸的浏览器。

基本上,对于'.transblock'div,宽度为44%(取自体宽),'。h1text'div的宽度为30%。

实现预期效果的解决方法可能是使用一些javascript(jQuery)代码来动态计算元素的宽度和位置:

jQuery('.transblock').width(jQuery('body').width() * 0.44);
jQuery('.h1text').width(jQuery('body').width() * 0.3);
jQuery('.h1text').css('left', jQuery('body').width() * 0.135);

您可以查看this fiddle

注意:请注意如何使用图像的宽度和高度。设定宽度:100%;和身高:100%;在非方形图像上可能会出现不需要的宽高比:

.bg-img{
    width: 100%;
    height: 100%;
}

指定宽度就足够了:100% - 浏览器会使图像适合容器,而不会强制图像的高度,保持比例为1:1。