如何使用纯CSS将指定的HTML内容转换为固定的宽度和高度元素？

Question

在这张图片中，我有一个HTML内容“div＃container”。它可能包含许多内容，如图像，表单和其他HTML标记。

我想调整此div的大小并将其放在其他容器中。新容器可能有不同的widht / height，所以我必须调整div#container的大小。这有点像调整图像大小 - 我需要保持宽高比。我需要将div＃容器放在新容器的中心。

是用纯CSS做的吗？

由于

Answer 1

以下是使用height: 100%上的width: 100%和div#container以及padding上的div#dash-container执行此操作的方式：

＆＃13;

＆＃13;

.container {
    background: lightgray;
    position: relative;
    height: 100%;
    width: 100%;
}
.dash-container-1,
.dash-container-2 {
    box-sizing: border-box;
    border: dashed 2px;
}
.dash-container-1 {
    height: 500px; /*whatever sizes you want*/
    width: 300px;
    padding: 100px 0;
}
.dash-container-2 {
    height: 300px;
    width: 500px;
    padding: 0 5%; //you can use px, %, em, ...
}

＆＃13;

<div class="dash-container-1">
    <div class="container"></div>
</div>
<div class="dash-container-2">
    <div class="container"></div>
</div>

＆＃13;

＆＃13;

＆＃13;