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

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

解决方法

你的css没有任何效果,因为外部元素没有定义宽度(并且身体也缺少).

不同的方法是提供已经缩放的图像. http://www.sencha.com/products/io/例如根据观看设备递送已经缩小的图像.

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

解决方法

相关文章