根据内部孩子均匀地调整父包装的高度和宽度

Question

我有一个广告系列网页，我将在其中发布视频或图像。我使用脚本加载内容。如果获取的内容是图像，则将显示如下。

图像将正确包裹在白色包装纸内。

但是，当视频加载到同一包装器中时，它将显示如下

广告内容将是随机的，可以是任何图像或视频。所有类型的具有不同方向的图像都可以正确放置，但视频不适合。

视频的宽度和高度始终相同。

HTML

加载视频时

<div class="campaign-wrap">
    <div id="ad_area" style="text-align:center;">
        <video src="https://video.serve.in/files/video_messi.mp4" onplay="window.V.ads.push({id:380, loaded: true, server:'video.serve.in'})" preload="auto" autoplay="" playsinline="" muted="" controls="" type="video/mp4" id="vid" width="300" height="250"></video>
    </div>
</div>

加载图像时

<div class="campaign-wrap">
    <div id="ad_area" style="text-align:center;">
        <img src="https://video.serve.in/getad.img?libID=383&amp;placement=ad_area" alt="hello" title="hello" border="0" width="300" height="600">
    </div>
</div>

CSS

我添加到父包装的样式是

.campaign-wrap {
    margin-bottom: 10px;
    width: 100%;
    background-color: rgba(255,255,255,0.5);
    padding: 10px;
}

div #ad_area中的内容是使用脚本加载的。

如何将广告均匀地均匀地放置在包装纸内？或者如何根据内部内容调整包装纸？

请提供任何建议。

谢谢。

Answer 1

我会尝试：

.campaign-wrap {
  display: flex;
  align-items: center;
  /* ... */
}

说明：flexbox是现代CSS的一项强大功能，可以解决一些过去曾带来很多问题的格式设置问题：其中之一是垂直对齐。 Compatibility table。