Question

I have a responsive layout that requires my image heights be constrained to the available window height (minus header). It works fine with just images in a <div>, but if the images are wrapped in an <a> tag the height is no longer constrained. Resizing the browser no longer has an effect on the image, even as it properly sizes the <a>.

How do I constrain the image height within the <a> tag so it doesn't just overflow? I'm using the jquery cycle2 plugin, so a CSS-only solution is strongly preferred to avoid conflicts.

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>

Working JSFiddle (just <img>)

中包含的图像高度

Non-working JSFiddle (<a><img></a>)

Answer 1

.cycle-slideshow a {
    display: block
}

在这种情况下，您无法为内联块定义最大高度。

Answer 2

如果您为链接设置了height:auto属性，则其高度将采用内部图像的高度。因此，请删除此属性并将其设置为100％以填充容器。

.cycle-slideshow a {
    display: block;
    width: auto;
    height: 100%;
}

约束<a> tag

2 个答案: