0

好的，我正在制作一个有两侧的布局。左边是 30%，右边是 70%。我有一个宽屏显示器，所以所有的图像都将显示我想要的方式，并且还有足够的空间。但是在较低的分辨率和最常见的 1024x768 上，我制作的图像对于左侧来说太大了，并且超出了右侧的边界。我如何使图像自动调整大小以适应较小的分辨率？

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 {
  ??
}
4

4 回答 4

1

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

例如：

img {
    max-width:90%;
}
于 2011-07-11T01:31:54.093 回答
0

根据您的图像，您可以添加overflow: hiddendiv #left。

于 2011-07-11T01:30:11.770 回答
0

一种方法是将图像添加到#left div.

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

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

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

于 2011-07-11T01:30:53.303 回答
0

这将做到：

#left img {
  width: 100%;
}
于 2011-07-11T01:32:59.027 回答