混合内容 (Image/Text) 在 Div 中调整大小

Question

我正在尝试建立一个系统，用户可以在其中更改显示的 image/text 组合的大小（想想 "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/Whosebug/img/apple-touch-icon@2.png?v=ea71a5211a91&a">
    </div>
    <h6>This is a test.</h6>
   </div>
  </div>
 </body>
</html>

Answer 1

看这个jsbin（只需拖动红色框角即可调整大小）。当你将图像父块的高度设置为自动时，像这样：

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 重新计算图像容器的高度。

混合内容 (Image/Text) 在 Div 中调整大小

Mixed Content (Image/Text) Resizing in a Div

html

css

resize

image