我有一个响应式布局，要求将图像高度限制为可用的窗口高度（减去标题）。它仅适用于
中的图像，但如果图像包裹在 标签中，则高度不再受到限制。调整浏览器大小不再影响图像，即使它正确调整了 的大小。
如何限制 标记中的图像高度，使其不会溢出？我正在使用 jquery cycle2 插件，因此强烈建议使用仅限 CSS 的解决方案以避免冲突。
body, html {
width: 100%;
height: 100%;
}
body {
background-color: #CCC;
font-size: 1em;
margin: 0;
padding: 0;
}
header {
background-color: white;
height: 4.5em;
}
#content {
height: calc(100% - 72px);
max-height: 100%;
text-align: center;
}
#inner-content {
max-height: 100%;
height: 100%;
min-height: 100%;
}
.ps-slideshow-container {
background: red;
height: 100%;
}
.cycle-slideshow {
height: 100%;
max-height: calc(100% - 72px);
background: yellow;
position: relative;
}
.cycle-slideshow a {
width: auto;
height: auto;
max-height: 100%;
}
.cycle-slideshow a img {
width: auto;
height: auto;
max-height: calc(100% - 36px);
max-width: 100%;
display: block;
}
.ps-cycle-meta {
background-color: #999;
}
.wrap {
max-width: 960px;
margin: 0 auto;
}<body>
<header>
<div id="inner-header" class="wrap">Resize does not work</div>
</header>
<div id="content">
<div id="inner-content" class="wrap">
<div class="ps-slideshow-container">
<div class="cycle-slideshow">
<a href="" class="cycle-slide"><img src="http://malsup.github.io/images/p1.jpg" alt="image1"></a>
</div>
<div id="ps-cycle-nav-1" class="ps-cycle-nav ps-centered"><a href="" class="ps-pro-genericon ps-pro-genericon-previous">Prev</a><a href="" class="ps-pro-genericon ps-pro-genericon-next">Next</a></div>
<div id="alt-caption" class="center ps-cycle-meta">Caption</div>
</div>
</div>
</div>
</body>工作 JSFiddle （只是 ）
非工作 JSFiddle （）
.cycle-slideshow a {
display: block
}
在这种情况下，您无法定义内联块的最大高度。
如果您为链接设置height:auto属性，则他的身高将采用内部图像的高度。因此，请删除此属性并将其高度设置为 100% 以填充容器。
.cycle-slideshow a {
display: block;
width: auto;
height: 100%;
}