0
我有一個響應式佈局，要求我的圖像高度限制在可用窗口高度（減去標題）。它只適用於<div>中的圖像，但如果圖像被包裝在<和>標籤中，則高度不再受到限制。調整瀏覽器大小不再對圖像產生影響，即使它適當地調整了大小<a>。限制包裹圖像的高度<a>標記
如何限制圖像高度在<a>標記內，以便它不會溢出？我使用的是jquery cycle2插件，因此強烈建議使用純CSS解決方案來避免衝突。
body, html {
\t \t width: 100%;
\t \t height: 100%;
\t }
\t body {
\t \t background-color: #CCC;
\t \t font-size: 1em;
\t \t margin: 0;
\t \t padding: 0;
\t }
\t header {
\t \t background-color: white;
\t \t height: 4.5em;
\t }
\t #content {
\t \t height: calc(100% - 72px);
\t \t max-height: 100%;
\t \t text-align: center;
\t }
\t #inner-content {
\t \t max-height: 100%;
\t \t height: 100%;
\t \t min-height: 100%;
\t } \t
\t .ps-slideshow-container {
\t \t background: red;
\t \t height: 100%;
\t }
\t .cycle-slideshow {
\t \t height: 100%;
\t \t max-height: calc(100% - 72px);
\t \t background: yellow;
\t \t position: relative;
\t } \t
\t .cycle-slideshow a {
\t \t width: auto;
\t \t height: auto;
\t \t max-height: 100%;
\t }
\t .cycle-slideshow a img {
\t \t width: auto;
\t \t height: auto;
\t \t max-height: calc(100% - 36px);
\t \t max-width: 100%;
\t \t display: block;
\t }
\t .ps-cycle-meta {
\t \t background-color: #999;
\t }
\t .wrap {
\t \t max-width: 960px;
\t \t margin: 0 auto;
\t }<body>
<header>
\t <div id="inner-header" class="wrap">Resize does not work</div>
</header>
<div id="content">
\t <div id="inner-content" class="wrap">
\t \t <div class="ps-slideshow-container">
\t \t \t <div class="cycle-slideshow">
\t \t \t <a href="" class="cycle-slide"><img src="http://malsup.github.io/images/p1.jpg" alt="image1"></a>
\t \t \t </div>
\t \t \t <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>
\t \t \t <div id="alt-caption" class="center ps-cycle-meta">Caption</div>
\t \t </div>
\t </div>
</div>
</body>Non-working JSFiddle (<a><img></a>)
我編輯了片段和JSFiddle來刪除內聯塊。它不需要在那裏，但這不是問題。 –