如何自动调整移动网站的图像大小？答案

【问题标题】：How do I automatically resize an image for a mobile site?如何自动调整移动网站的图像大小？
【发布时间】：2011-12-01 12:02:14
【问题描述】：

我对此进行了 Google 搜索，但仍然无法弄清楚如何根据各种移动设备的宽度调整图像的大小。这是我的尝试：

CSS：

img.test {
    width: 100%;
    height: auto;
}

HTML：

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;   user-scalable=0;" name="viewport">
        <link rel="stylesheet" href="../includes/style.css">
    </head>
    <img class="test"  src="../includes/foo.jpg">

但图像仍在以其原始缩放比例加载。我是一个 css 和 html 新手，所以任何帮助都会很棒！

编辑：

感谢您的回复。这是一个现在可以使用的修订版。

HTML：

   <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;  user-scalable=0;" name="viewport">
        <link rel="stylesheet" href="../includes/style.css">
    </head>
    <body width = "device-width">
        <img class="test"  src="../includes/buoy_map.jpg">
    </body>

【问题讨论】：

你给图片的父元素一个宽度了吗？
您的img 标签应该在body 内。你实际上没有有一个body标签，所以添加一个:-)

标签： html css image

【解决方案1】：

img.thatimage
{
    max-width: 100%;
    min-width: 300px;
    height: auto;
}

/* This is how you set the style for a certain image */

&lt;img class="thatimage" src="your_image_path" alt="" style=""&gt;

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

img {
  max-width: 100%;
}

应将图像设置为占其包含元素的 100%。

【讨论】：

这在某些情况下很有用，但它会忽略图像的纵横比，可能会歪斜它。
在这种情况下它应该包括 height: auto;

【解决方案3】：

您可以使用以下 css 调整移动视图的图像大小

object-fit: scale-down; max-width: 100%

【讨论】：

非常感谢您向我展示了 object-fit 属性。这正是我一直在寻找的东西，甚至让我发现了对象位置。

【解决方案4】：

如果你使用 bootstrap 3 ，只需在你的 img 标签中添加 img-responsive 类

<img class="img-responsive"  src="...">

如果您使用 bootstrap 4，请在您的 img 标签中添加 img-fluid 类

<img class="img-fluid"  src="...">

工作人员： max-width: 100%, height: auto, display:block to image

【讨论】：

我不知道为什么有人投票反对这个答案。这对我很有效。图像在移动浏览器中挤压得很好。谢谢。
高度：自动；为我做了伎俩。现在我的图像正在根据移动设备的分辨率调整大小。谢谢
这对我有用，但后来我使用的是 Bootstrap 4，所以它是内置的。对于 OP，情况可能并非如此。

【解决方案5】：

对我来说，最好在图像 css 中添加它：max-width:100%;，而不是在 html 参数中指定图像宽度和高度。这调整了宽度以适应设备屏幕，同时自动调整高度。否则高度可能会失真。

【讨论】：

【解决方案6】：

img
{
    max-width: 100%;
    min-width: 300px;
    height: auto;
}

【讨论】：

这对我有用，但我需要在页面上免除徽标。可以豁免特定图像吗？
现在好了。我将最小宽度减小到 100 像素。

【解决方案7】：

您的 css with 没有任何效果，因为外部元素没有定义宽度（并且 body 也丢失了）。

另一种方法是提供已缩放的图像。 http://www.sencha.com/products/io/ 例如，根据查看设备提供已按比例缩小的图像。

【讨论】：