好吧我正在做一个有两面的布局。左边是30％，右边是70％。我有一台宽屏显示器，所以所有的图像都会显示我希望它们还有剩余空间。但在较低的分辨率和最常见的1024x768，我所做的图像是左侧太大，走出边界到右侧..我如何使图像自动调整大小，以适应更小的分辨率？css流体布局图像问题

CSS

#left { 
    float:left; 
    width:30%; 
    height:100%; 
    position:fixed; 
    padding:20px; 
} 

#right { 
    float:right; 
    width:70%; 
    height:100%; 
    position:absolute; 
    padding:40px 20px; 
} 
#left img { 
    ?? 
}

来源

2011-07-11 user645607

一些示例HTML会有所帮助。很难从我们的最后看到你在做什么;）。 –

尝试使用max-width和图像上的百分比值。这样图像将永远不会超过这个百分比。

例如：

img { 
    max-width:90%; 
}

来源

2011-07-11 01:31:54

听起来没错。即时猜测它调整图像大小，以确保它填充90％的div宽度？ – user645607

如果你没有在图像上应用任何其他尺寸属性，除非它的全宽大于它所包含的div的90％，在这种情况下，它的宽度只会是div的90％包含在。 –

如果你想在div的90％_always_然后只是做宽度：90％。 –

根据您图像，你可以只在#left DIV添加overflow: hidden。

来源

2011-07-11 01:30:11 NotMe

其中一种方法是将图像添加到#left div的背景中。

图像不会调整大小，但它也不会流过边界。

虽然没有完整的浏览器支持，但您可以使用CSS3调整背景大小。

background-size:100% 100%;将确保图像大小为整个div。但是可能会有一些失真。

来源

2011-07-11 01:30:53

这将做到这一点：

#left img { 
    width: 100%; 
}

来源

2011-07-11 01:32:59

css流体布局图像问题

CSS

回答

相关问题