Html 如何为移动网站自动调整图像大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7662064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I automatically resize an image for a mobile site?
提问by Richard
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:
CSS：
img.test {
width: 100%;
height: auto;
}
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>
<img class="test" src="../includes/foo.jpg">
But the image is still being loaded with its original scaling. I am a css and html newb so any help would be great!
但是图像仍然以其原始缩放比例加载。我是 css 和 html 新手，所以任何帮助都会很棒！
Edit:
编辑：
Thanks for the responses. Here is a revised version that now works.
感谢您的回复。这是现在可以使用的修订版。
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>
采纳答案by konsolenfreddy
Your css with doesn't have any effect as the outer element doesn't have a width defined (and body is missing as well).
您的 css with 没有任何效果，因为外部元素没有定义宽度（并且 body 也丢失了）。
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.
另一种方法是提供已经缩放的图像。例如，http://www.sencha.com/products/io/提供已根据查看设备缩小的图像。
回答by Doozer Blake
img {
max-width: 100%;
}
Should set the image to take up 100% of it's containing element.
应该将图像设置为占据其包含元素的 100%。
回答by squarcle
img
{
max-width: 100%;
min-width: 300px;
height: auto;
}
回答by Lingjing France
if you use bootstrap 3, just add img-responsiveclass in your img tag
如果您使用bootstrap 3，只需在您的 img 标签中添加img-responsive类
<img class="img-responsive" src="...">
if you use bootstrap 4, add img-fluidclass in your img tag
如果您使用bootstrap 4，请在您的 img 标签中添加img-fluid类
<img class="img-fluid" src="...">
which does the staff: max-width: 100%, height: auto, and display:block to the image
工作人员：最大宽度：100％，高度：自动和显示：块到图像
回答by adrianTNT
For me, it worked best to add this in image css: max-width:100%;and NOT specify image width and height in html parameters. This adjusted the width to fit in device screen while adjusting height automatically. Otherwise height might be distorted.
对我来说，最好在图像 css: 中添加它，max-width:100%;而不是在 html 参数中指定图像宽度和高度。这会在自动调整高度的同时调整宽度以适应设备屏幕。否则高度可能会失真。
回答by Chaitra D
You can use the following css to resize the image for mobile view
您可以使用以下 css 调整移动视图的图像大小
object-fit: scale-down; max-width: 100%
