0

我正在使用一个数组/循环从一个名为画廊（Wordpress）的自定义字段中获取我的图像。检索到的图像未调整大小，这意味着它们的最大宽度为 150 像素或最大高度为 150 像素。现在我想知道如何自动让这些图像适应浏览器的大小。Chrome 完美地做到了这一点，但 IE 和 FF 却没有。当我设置 img { width:100%;} 时，调整大小会起作用，但随后图像本身的大小就被搞砸了，正如您可以想象的那样。

还有其他可能让图像自动调整到浏览器大小吗？谢谢你的时间！

4

2 回答 2

1 
#img.source-image
{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

应该做的伎俩。

另外，让你的问题更清楚。

http://css-tricks.com/how-to-resizeable-background-image/有一些不错的例子。

于 2013-02-27T14:29:28.620 回答
1

尽量不要在表格内显示图像，因为表格需要在显示任何单元格之前加载每个单元格，从而增加下载查看时间。此外，尽可能尝试不要让浏览器调整任何图像的大小。你可以自己做这件事，效果会更好。您可以在 css 中定义以检测屏幕尺寸。然后设置一系列的屏幕尺寸来引导不同的图像，例如如果 window.width < 800px{load 800pxImage}, if window.width > 800px{load 1600pxImage} 这样你可以补偿浏览器窗口的种类繁多，因为有不可能一种设计适用于所有机器。这可能会产生更多代码并需要更多研究，但您应该研究一下。这是一个使用 HTML 和 CSS 的示例：

HTML /* 标准 body 和 div 设置来创建响应站点，该站点随每个浏览器窗口更改其大小，这是允许浏览器调整块部分的好方法 */

<body class="background">
     <div id="content" class="etc">
         .....
         ....
      </div>
</body>

CSS

/* 创建一个简单的 css 文件以包含基本设置 */

body {
   font: 100%/1.4, Verdana, Geneva, Sans serif;
   margin: 0; padding: 0; border: 0;
   width: 100%; Height: 100%; }

div #content {
   width: 75%;
   text-align: center; }

/*Apply as default image to use if the window does not meat any criteria */
body.background {
   background-image: url(../Images/YourImage1600px);
   background-repeat: no-repeat; }

/*判断屏幕大小是否等于或小于800px，如果是加载，则使用判断括号内的css。您可以有多个语句来确定多个设置。对于简洁的代码，您可以将所有新要求放入单独的 css 文件中，并在查询语句中，只需链接到 css 文件。因此从技术上讲，您可以拥有一个单独的 css 文件，该文件仅用于确定用户要求和加载其他 css 文件

@media only screen and (max-width: 800px){
    body.background {
        background-image: url(../Images/YourImage800px);
        background-repeat: no-repeat; 
    }
}

我希望你能理解这一切，它会有所帮助。

于 2013-06-18T09:46:58.240 回答