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

Question

我有一张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/ -开始全屏，缩小窗口-框和文本向中间漂移太多。(它与图像完美地缩放，这在本例中是一件坏事:( )。我想让它相对于下面的菜单留在适当的位置。你知道怎么做吗？谢谢!

Answer 1

用于显示绿色矩形和文本的容器使用常规宽度。查看CSS，您会发现没有为父元素指定固定的宽度。这将转化为浏览器获取正文宽度值并使用它来计算尺寸。

基本上，'.transblock‘目录的宽度为44% (取自主体宽度)，'.h1text’目录的宽度为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。