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

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

用于显示绿色矩形和文本的容器使用 procentual 宽度。查看 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%;
}

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