极客观点
项目管理
HarmonyOS
我尝试用谷歌搜索这个，但仍然无法弄清楚如何根据各种移动设备的宽度调整图像的大小。这是我的尝试：
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>
原文由 Richard 发布，翻译遵循 CC BY-SA 4.0 许可协议
您的 css 没有任何效果，因为外部元素没有定义宽度（并且 body 也丢失了）。
一种不同的方法是提供已经缩放的图像。 http://www.sencha.com/products/io/ 例如提供已经根据查看设备缩小的图像。