html - 具有不同尺寸图像的响应图像列表

我开始学习响应式网页设计，但现在我遇到了一个小问题: 我的导航是一个包含图像的列表，其中每个图像都有不同的宽度。这是结果:http://jsfiddle.net/yxLLncpb/

如果我对每张图片都使用相同的尺寸，并且如果窗口变小，图片也会变小。

但我给每张图片都设置了单独的尺寸，如下所示:

ul li#home{width:7,53%;}
ul li#vermeldungen{width:18,59%;}
ul li#tup{width:20,83%;}
ul li#ug{width:22,59%;}
ul li#kirchen{width:8,79%;}

现在，如果我调整窗口大小，图像将保持其大小:/ 谁能告诉我，为什么图像也没有调整大小？

最佳答案

ul li#home{width:7.53%;}
ul li#vermeldungen{width:18.59%;}
ul li#tup{width:20.83%;}
ul li#ug{width:22.59%;}
ul li#kirchen{width:8.79%;}

你用错了逗号，需要用点号

<li id="kirchen"><img src="http://www.georgs-kirche.de/wordpress/wp-content/themes/georgtheme/images/nav_kirchen.png"></li>

您使用的最后一项 class 但需要更改 id

检查工作fiddle.

关于html - 具有不同尺寸图像的响应图像列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26465105/