Question

我正在尝试建立一个系统，用户可以在其中更改显示的图像/文本组合的大小（想想“Exhibit＃。＃”之类的东西），其中图像将缩小到所需的任何大小将周围的内容推到包含的内容之外。但是，我尝试过的所有内容都存在一个问题，并且鉴于我正在使用的图像可以是各种尺寸，我需要一个能够处理所有情况的解决方案。

这似乎是一个简单的问题，但无论出于何种原因，我都完全难过了。

这是一个带有动画大小的JSBin，可以更好地说明我的问题：https://jsbin.com/sezimudedi/1/edit?css,output

我正在使用的html / css：

body div {
    text-align: center;
}

@keyframes movingbox {
    0%   { height: 100px; width: 100px; }
    25%  { height: 500px; width: 100px; }
    50%  { height: 500px; width: 500px; }
    75%  { height: 100px; width: 500px; }
    100% { height: 100px; width: 100px; }
}

div.divblock {
    display: inline-block;
    border: 2px dotted red;
    margin: auto;
    padding: 10px;
    text-align: center;
    animation: movingbox 8s linear infinite;
}

div.divblock div {
    width: 100%;
    height: auto;
}

div img {
    max-width: 100%;
    max-height: 100%;
}

div.divblock h6 {
    display: block;
}

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<div>
			<div class="divblock">
				<h4>Header Text</h4>
				<p>The quick brown fox jumped over the lazy dog.</p>
				<div>
					<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=ea71a5211a91&a">
				</div>
				<h6>This is a test.</h6>
			</div>
		</div>
	</body>
</html>

Answer 1

查看此jsbin（只需拖动红色框角即可调整大小）。将图像父块的高度设置为auto时，如下所示：

div.divblock div {
    width: 100%;
    height: auto;
}

你使这个块的高度取决于它的内容高度（img元素），从另一方面来说，你希望图像宽度和高度等于它的父块大小，使用这段代码：

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

您的jsbin示例中满足所有这些条件，但如果您为图像容器添加轮廓，您将看到它的高度保持不变（等于图像高度）。所以问题不在于图像（它调整大小很好），而是在图像块高度。

由于难以计算父容器的高度的哪一部分必须用作图像块高度，因为您使用动画更改父容器的高度，导致图像块高度更改问题。在父容器中还有一些具有恒定高度的内容，因此在每次更改它的高度时，图像容器的高度必须计算为（100％ - height_of_constant_content）。

我的解决方案是使用css calc()功能，但请考虑it's support in browsers帐户。您还可以使用一些js重新计算图像容器高度。

混合内容（图像/文本）在Div中调整大小

1 个答案: