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