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

我尝试了谷歌搜索这个，仍然无法弄清楚如何调整图像的宽度为各种移动设备。这里是我的尝试：如何自动调整移动网站的图片大小？

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>

来源

2011-10-05 Richard

你给出了图像的父元素的任何一个宽度？ – Gerben

你的'img'标签应该放在'body'里面。您实际上并不拥有身体标记，因此添加一个:-) – Bojangles

由于外部元素没有定义宽度（并且正文缺失），因此您的css没有任何效果。

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

来源

2011-10-05 13:40:52 konsolenfreddy

img { 
    max-width: 100%; 
}

如果设置图像的它包含的元素占用100％。

来源

2011-10-05 13:37:56

在某些情况下，这很有用，但它会忽略图像的纵横比，可能会使其偏斜。 – jamesnotjim

在这种情况下，它应该包括高度：auto; – Geomorillo

这应该是公认的答案 – niry

img 
{ 
    max-width: 100%; 
    min-width: 300px; 
    height: auto; 
}

来源

2013-08-28 19:22:49 squarcle

对于我来说，它的工作最好在图像的CSS补充一点：max-width:100%;和未指定的HTML参数图像的宽度和高度。这调整了宽度以适应设备屏幕，同时自动调整高度。否则高度可能会扭曲。

来源

2014-10-13 16:32:10 adrianTNT

如果使用引导3，只是在你的img标签

<img class="img-responsive" src="...">

添加IMG响应类，如果你使用引导4，在IMG标记添加IMG流体类

<img class="img-fluid" src="...">

工作人员： max-width：100％，height：auto，a nd display：block to the image

来源

2017-05-04 09:18:47

我不知道为什么有人投票了这个答案。这对我很好。移动浏览器中的图像挤压得很好。谢谢。 –

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

回答

相关问题