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

发布时间：2020-12-14 19:33:31 所属栏目：资源来源：网络整理

导读：我尝试了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=

我尝试了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/例如根据观看设备递送已经缩小的图像.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!