Css 图像虽然在响应容器中，但没有响应

我有以下资料：

<div id="hp_imgs">
    <img src="/images/hp/1.jpg">
    <img src="/images/hp/2.jpg">
    <img src="/images/hp/3.jpg">
    <img src="/images/hp/4.jpg">
    <img src="/images/hp/5.jpg">
    <img src="/images/hp/6.jpg">
    <img src="/images/hp/7.jpg">
    <img src="/images/hp/8.jpg">
</div>

是否有更好/不同的方法来实现这一点

小提琴

下面是一个示例：

JSBin

---

我倾向于为所有像这样的图像设置一个基本CSS规则，使它们自动响应=

img {
     width:100%;
     height:auto;
}

---

这样，图像将根据父级/容器宽度保留其纵横比，并在调整大小时将高度设置为正确的比例大小。

你有小提琴吗？如果你有小提琴，那就太好了-有东西可以使用。上个小时一直在尝试，但我根本无法加载（英国）-将继续尝试，我完全同意它更容易尝试，你想要水平还是垂直？@DarrenSweeney-Hmm好的-如果你能提供一个示例链接，我会看一看，看看父容器中是否有冲突的样式，或者其他添加了小提琴和JSBin的示例，好的，为了使图像调整大小但保留网格布局，您需要做的是在每个图像周围应用一个div并设置一些交替类，即图像一有一个宽度为40%的类，图像二有一个宽度为60%的类，这些类向左浮动或

display:inline block应使这些“列”响应，图像将调整到其父div宽度，该宽度也将调整大小。-这有什么意义吗？如果有帮助的话，我今晚会做一个演示。谢谢，完全明白你的意思。如果我选择改变一个图像，那么我将采用不同的布局，这对于维护一个梦魇的宏伟计划来说并不值得。谢谢你的回复，不用担心！这可能是一个很好的方法，可以尝试在某个时候使用jQuery插件！有什么评论/细节吗？OP怎么能得出这个解决方案？对不起，我不明白你的问题。
#hp_imgs {
    width:66%;
    float:left;
    max-width:143px;
    height:auto;
}

#hp_imgs img {
    float:left;
    margin:2px;
    border-radius:4px;
    display: block;
    max-width:143px;
    height:auto;
    width:100%;
}

#hp_imgs {
    width:66%;
    float:left;
    max-width:143px;
    height:auto;
}

#hp_imgs img {
    float:left;
    margin:2px;
    border-radius:4px;
    display: block;
    max-width:143px;
    height:auto;
    width:100%;
}