我尝试了谷歌搜索,仍然无法弄清楚如何根据各种移动设备的宽度调整图像大小.这是我的尝试:
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>
Doo*_*ake 44
img {
max-width: 100%;
}
应该将图像设置为占据其包含元素的100%.
小智 18
img
{
max-width: 100%;
min-width: 300px;
height: auto;
}
您可以使用以下 css 调整移动视图的图像大小
object-fit: scale-down; max-width: 100%
如果你使用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
您的 css 没有任何效果，因为外部元素没有定义宽度（并且主体也丢失了）。
另一种方法是提供已经缩放的图像。例如， http://www.sencha.com/products/io/提供的图像已根据查看设备按比例缩小。