我正在尝试建立一个系统，用户可以在其中更改显示的图像/文本组合的大小（例如“ 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/[email protected]?v=ea71a5211a91&a">
</div>
<h6>This is a test.</h6>
</div>
</div>
</body>
</html>看起来这个jsbin（只需拖动红色框的角以调整大小）。将图像父块的高度设置为自动时，如下所示：
div.divblock div {
width: 100%;
height: auto;
}
您可以使用以下代码使该块高度取决于其内容高度（img元素），从另一面来看，您希望图像的宽度和高度等于其父块大小：
div img {
max-width: 100%;
max-height: 100%;
}
jsbin示例中满足了所有这些条件，但是如果您为图像容器添加轮廓，您将看到其高度保持不变（等于图像高度）。因此，这里的问题不在于图像（可以调整大小），而在于图像块的高度。
在用动画更改父容器的高度后，由于难以计算必须将父容器的高度的哪一部分用作图像块高度而导致的图像块高度变化问题。您的父容器中也有一些高度恒定的内容，因此，每次更改高度时，图像容器的高度都必须计算为（100％-height_of_constant_content）。
我的解决方案是使用csscalc()函数，但要考虑到它在浏览器中的支持。您也可以使用一些js重新计算图像容器的高度。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句