根据浏览器调整图片大小答案

【问题标题】：Adjust image size to browser根据浏览器调整图片大小
【发布时间】：2013-02-13 07:34:26
【问题描述】：

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

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

【问题讨论】：

我假设您的意思是它们被像素化了，而不是它们的大小存在特定问题？
嘿，我的表格中有不同高度和宽度的图像，所以我无法为图像设置百分比，因为它们都不同。但是，只有当我在调整浏览器大小时为他们调整的图像设置百分比时。由于我不能使用百分比，还有其他方法可以让它们适合我的浏览器吗？
是的，但我有不同宽度和高度的图像。我有 150x99 像素的图像和 99x150 像素的图像所以可以说比例方面不同。猜猜我不能用百分比吧？
您可以使用百分比。这就是我的观点。如果您固定宽度（或高度），浏览器将计算未为您定义的属性。在此处查看演示 > jsfiddle.net/FHwhw。请注意图像的宽度相同，但高度不同。
您好，谢谢。好吧，也许我可以，但我不明白怎么做（对不起）。我看了一下你的例子，但我的图像有不同的宽度（和高度）。所以 image:50%;不会做对吗？

标签： css image wordpress browser scale

【解决方案1】：

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

应该做的伎俩。

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

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

【讨论】：

您好，感谢您的回复。希望一切都清楚。但无论如何，这并没有为我解决。我在表格中有图像，具有不同的宽度和高度。因此，将图像的宽度设置为 100% 或任何百分比都行不通。所以我正在寻找另一种修复方法，让它们自动适应浏览器
您可以尝试使用某种算法调整它们的大小，然后根据屏幕尺寸加载图像，SimpleImage 可以完成这项工作：white-hat-web-design.co.uk/articles/php-image-resizing.php 或者只是将某些类添加/删除与屏幕尺寸对应的图像，如果它给你带来地狱，请使用固定像素而不是百分比。

【解决方案2】：

尽量不要在表格内显示图像，因为表格需要加载每个单元格才能显示，这会增加下载查看时间。此外，尽可能尝试不要让浏览器调整任何图像的大小。你可以自己做这件事，效果会更好。您可以在 css 中定义以检测屏幕尺寸。然后设置一系列屏幕尺寸来引导不同的图像，例如 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; 
    }
}

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

【讨论】：