Html CSS图像按高度调整大小

我了解基于宽度改变图像比例的图像大小调整技术：

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

我只需要根据父对象的高度而不是宽度来做同样的事情。我尝试了以下方法，但没有效果：

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

我希望我能充分解释这一点

---

请帮助：）

最大高度

将仅限制高度小于给定值

如果您希望它与其父级相同。。将其命名为高度：100%

因此，这应该是可行的： CSS:

---

使用标准css技术无法有效地将其基于高度，但可以使

高度

与图像的

宽度

直接相关，以获得更灵活的布局。试试这个：

img {
    position: relative;
    width: 50%;     /* desired width */
}
img:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

---

我已经试过了，效果很好

    <div class="parent">
    <img src="http://searchengineland.com/figz/wp-content/seloads/2014/07/google-logo-sign-1920-600x337.jpg" alt="..." />
</div>


.parent {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.家长{
宽度：100%；
高度：180像素；
溢出：隐藏；
}

看到这里了吗

---

是

jquery

一个选项吗？？？@NoobEditor；）<代码>宽度：100%；高度：自动@BenM:hmm…明白了！！：pyesjquery是一个选项

    <div class="parent">
    <img src="http://searchengineland.com/figz/wp-content/seloads/2014/07/google-logo-sign-1920-600x337.jpg" alt="..." />
</div>


.parent {
    width: 100%;
    height: 180px;
    overflow: hidden;
}