根据浏览器调整图像大小
我使用数组/循环从一个名为gallery（Wordpress）的自定义字段获取图像。检索到的图像未调整大小，这意味着它们的最大宽度为150px，最大高度为150px。现在我想知道如何自动让这些图像适应浏览器的大小。Chrome做得很好，但IE和FF做不到。当我设置img{width:100%；}调整大小是可行的，但是图像本身的大小是错误的，你可以想象得到。
是否有其他可能让图像自动调整到浏览器大小？谢谢你的时间！
共有2个答案
尽量不要在表格中显示图像，因为表格需要在显示任何单元格之前加载每个单元格，这会增加下载到查看的时间。此外，尽可能不要让浏览器调整任何图像的大小。你可以自己做，结果会更好。您可以在css中定义以检测屏幕大小。然后设置一系列屏幕大小以引导不同的图像，例如if窗口。宽度
超文本标记语言/*标准正文和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;
}
}
我希望你能理解这一切，这会有所帮助。
#img.source-image
{
width: 100%;
position: absolute;
top: 0;
left: 0;
}
我们应该做到这一点。
另外，让你的问题更清楚。
http://css-tricks.com/how-to-resizeable-background-image/有一些不错的例子。
-
问题内容： 我希望在调整浏览器窗口大小时自动调整所有（或部分）图像的大小。我发现了以下代码-尽管它什么也没做。 HTML CSS 在调整浏览器窗口的大小时，如何基本设置全屏设计（带有），并使元素处于完全相同的位置（明智的选择），同时它们的大小也进行调整（就像对背景一样）？ 要使图像灵活，只需添加和。图像并在IE7中有效，但在IE8中无效（是的，另一个怪异的IE错误）。要解决此问题，您需要添加IE8
-
问题内容： 这看似微不足道，但是经过所有的研究和编码，我无法使其正常工作。条件是： 浏览器窗口大小未知。因此，请不要提出涉及绝对像素大小的解决方案。 图片的原始尺寸未知，可能适合浏览器窗口，也可能不适合浏览器窗口。 图像垂直和水平居中。 图像比例必须守恒。 图像必须在窗口中完整显示（不裁剪）。 我不希望滚动条出现（如果图像合适，它们也不应该出现。） 窗口尺寸更改时，图像会自动调整大小，以占据所有可
-
请看下面的P5代码 这个小应用程序的目的是在画布上拖放图像，根据“上传”图像的宽度和高度改变其大小。 使用：成功加载图像（至少显示图像）后，我将其宽度和高度分配给变量和。接着是画布大小的变化。。。这会导致一个错误，画布的大小与上传的图像相同（在上选中），但不显示任何内容。 使用：当禁用上的画布大小更改并单击画布时，调整大小会完美地显示图像。 应用程序需要在不点击的情况下工作，在删除图像后应该自动更
-
问题内容： 调整浏览器窗口大小时，有什么方法可以调整jqGrid的大小？我已经尝试过这里描述的方法，但是该技术在IE7中不起作用。 问题答案： 作为后续措施： 由于不可靠，本文中显示的先前代码最终被放弃了。我现在按照jqGrid文档的建议使用以下API函数调整网格大小： 为了进行实际的大小调整，将实现以下逻辑的函数绑定到窗口的resize事件： 使用其父级的clientWidth和（如果不可用）o
-
问题内容： 我在这里使用Go调整大小包：https：//github.com/nfnt/resize 我正在从S3中提取图像，如下所示： // this gives me data []byte 之后，我需要调整图像大小： // problem is that the original_image has to be of type image.Image 将图像上传到我的S3存储桶 // pro
-
问题内容： 我要在pdf文件中添加一个水印。水印是.bmp图像，并且是2290 x3026。尝试调整此图片的大小以适合页面时，我遇到很多麻烦，有人有什么建议吗？ 这是方法的输出。 我会与你们共享pdf图片，但不幸的是我不能。 我应该尝试改用.jpg吗？我真的不知道iText如何处理不同的图像扩展名。 问题答案： 您可以使用另一种方法：“手动”调整图像大小（即通过图像处理软件），而不是通过iText