Question

我尝试了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>

Answer 1

img {
  max-width: 100%;
}

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

Answer 2

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

Answer 3

如果您使用 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 the image

Answer 4

你的css没有任何效果，因为外部元素没有定义宽度（并且身体也缺失）。

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

Answer 5

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

Answer 6

您可以使用以下CSS为移动视图调整图像大小

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

如何自动调整移动网站的图片大小？

6 个答案: