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

Answer 1

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

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

1 个答案: