个人中心
gpt4 book ai didi

html - 限制包裹在 标签中的图像高度

转载 作者：行者123 更新时间：2023-11-28 06:15:23 25 4
gpt4 key购买 nike

我有一个响应式布局，要求将我的图像高度限制为可用窗口高度(减去标题)。它只适用于

中的图像，但如果图像被包裹在 标记中，则高度不再受到限制。调整浏览器大小不再对图像产生影响，即使它适本地调整了 的大小。

如何限制 标签内的图像高度，使其不会溢出？我正在使用 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>

Working JSFiddle (just <img>)

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

最佳答案 

.cycle-slideshow a {
    display: block
}

在这种情况下，您不能为内联 block 定义最大高度。

关于html - 限制包裹在 <a> 标签中的图像高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35926414/

上一篇：css - Bootstrap - 居中内部 div

下一篇：html - 设置 Bootstrap 背景

25 4 0
文章推荐： javascript - 单击矩形数组的 Loop 中的 Listeners -- 关闭
文章推荐： swift - 代码不适用于关闭键盘
文章推荐： c++ - 我如何使用递归获取 Rod Cut 中的 Rod 尺寸？
文章推荐： swift - 如何在 Swift 3 中更新字典的键
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com