CSS-缩放元素和图像。使用%

我有一个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;}

---

-开始全屏显示，缩小窗口-框和文本漂移到中间太多。（它与图像比例完美，在本例中这是一件坏事：（）。我想让它相对于下面的菜单保持在原位。有什么办法吗？谢谢！

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

你可以看看

注意：注意如何在图像上使用宽度和高度。在非方形图像上设置宽度：100%；高度：100%；可能会导致不需要的纵横比：

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

---

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

嘿，Gabriel，谢谢。从某种意义上说，它的宽度不再随img缩放（如我所愿）.Tho我应该更准确地表达我的愿望。它也会失去一些宽度。比如，如果你从与底部菜单对齐的框/文本开始，缩小窗口，使其保持在相对于菜单的位置。有没有关于如何做的想法？：）如果我理解正确，你想让“页面标题”保持在同一位置，与菜单对齐。有一个更新的fiddle，它具有原始的HTML结构，在CSS和JS上做了一些更改：另一个fiddle在HTML上做了一些更改，这似乎更合适：