如何自动调整移动网站的图片大小？ [英] How do I automatically resize an image for a mobile site?
问题描述
我尝试过Google搜索，但仍然无法弄清楚如何根据各种移动设备的宽度调整图片大小。这是我的尝试：
I tried a Google search on this and still cannot figure out how to resize an image by its width for various mobile devices. Here is my attempt:
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 newb所以任何帮助将是伟大的！
But the image is still being loaded with its original scaling. I am a css and html newb so any help would be great!
编辑：
。这里是一个修订版本，现在工作。
Thanks for the responses. Here is a revised version that now works.
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没有任何效果外部元素没有定义的宽度（和主体也缺失）。
Your css with doesn't have any effect as the outer element doesn't have a width defined (and body is missing as well).
另一种方法是提供已缩放的图像。 http://www.sencha.com/products/io/ 例如已提供图片按比例缩小，取决于查看设备。
A different approach is to deliver already scaled images. http://www.sencha.com/products/io/ for example delivers the image already scaled down depending on the viewing device.
这篇关于如何自动调整移动网站的图片大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
