Question

我知道基于宽度改变图像比例的图像调整技术：

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

我只需要根据父级的高度而不是宽度来做同样的事情。我试过以下但没有效果：

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

我希望我能够很好地解释这一点。

请帮助：）

Answer 1

max-height只会将高度限制为小于给定值。

如果您希望它与其父级相同，请将其命名为height: 100%

因此这应该有效： CSS：

img{
  height: 100%; // changed max-height to height here
  width: auto; // this is optional
}

Answer 2

使用标准css技术无法有效地将其基于高度，但您可以使height直接与图像的width相关联，以获得更灵活的布局。试试这个：

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

Answer 3

我试过这个并且有效。

    <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;
}

在这里看到它 https://jsfiddle.net/shuhad/vaduvrno/

CSS图像按高度调整大小

3 个答案: