Question

我正在使用数组/循环从自定义字段中获取我的图像，称为图库（Wordpress）。检索到的图像不会调整大小，这意味着它们最大宽度为150px或高度最大为150px。现在我想知道如何自动让这些图像适应浏览器大小。 Chrome完美地做到了，但IE和FF却没有。当我设置img {width：100％;}调整大小时，但是你可以想象，图像本身的大小是固定的。

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

Answer 1

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

应该做的伎俩。

另外，请更清楚地提问。

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

Answer 2

尽量不在表格中显示图像，因为表格需要在显示任何单元格之前加载每个单元格，从而增加下载到查看时间。同时尽可能尝试不要让浏览器调整任何图像大小。你可以自己做很多更好的结果。您可以在css中定义以检测屏幕大小。然后设置一系列屏幕尺寸以引导不同的图像，例如，如果window.width＆lt; 800px {load 800pxImage}，如果window.width＆gt; 800px {load 1600pxImage} 通过这种方式，您可以补偿各种各样的浏览器窗口，因为一种设计无法在所有机器上运行良好。这可能会产生更多的代码，需要更多的研究，但你应该研究它。这是一个使用HTML＆amp; amp; 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; 
    }
}

我希望你能理解所有这些并且有所帮助。

调整图像大小到浏览器

2 个答案: