时间戳

首页 > 解决方案 > 根据内部孩子统一调整父包装的高度和宽度

css - 根据内部孩子统一调整父包装的高度和宽度

问题描述

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

在此处输入图像描述

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

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

在此处输入图像描述

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

视频，将始终保持相同的宽度和高度。

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 中的内容是使用脚本加载的。

如何将广告均匀地放置在包装器内，周围有相等的填充或如何根据内部内容调整包装器？

请有任何建议。

提前致谢。

标签： css

解决方案

我会试试这个：

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

解释：flexbox 是现代 css 的一个强大功能，它解决了一些在过去带来很多问题的格式问题：其中之一是垂直对齐。兼容性表。

推荐阅读