缩放 Div 屏幕大小，包括子项、文本和图像

Question

我的设计包含一个容器 div 中包含的多个 DIV。每个 DIV 都定位到像素，以便忠实地呈现设计。这些 DIV 包含文本和图像的组合。我需要整个东西随着屏幕尺寸的变化而调整大小，并且更普遍地响应。与基于断点的解决方案相比，我对缩放解决方案更感兴趣。我尝试了多种方法：视口计算、SCSS mixin、我尝试实现 this solution ...但基于我没有成功，我认为我没有正确使用它们。我的代码如下所示： - CSS

.spacer30 {
  margin-top:30px;
}
.cardFieldColor {
    position: absolute;
    height: 220px;
    width: 316px;
    top: 0px;
    left:0px;
    border-radius: 15px 0px 0px 0px;
    z-index= 1;
}

.fieldIconImg {
  width: 71px;
  height: 66px;
}

.fieldPictureImg {
  width: 284px;
  height: 195px;
}

.fieldIcon {
    position: absolute;
    top: 0px;
    left: 33px;
    z-index = 10;
}

.fieldPicture {
    position: absolute;
    height: 195px;
    width: 284px;
    top: 25px;
    left: 316px;
    border-radius: 0px 15px 0px 0px;
    z-index = 5;
}

.totalRaised {
    position: absolute;
    height: 134px;
    width: 600px;
    top: 220px;
    left: 0px;
    background-color: #383838;
    z-index = 5;
}

.stats-1 {
    position: absolute;
    height: 208px;
    width: 600px;
    top: 354px;
    left: 0px;
    background-color: #dcddde;
    z-index = 5;
}

.stats-2 {
    position: absolute;
    height: 71px;
    width: 600px;
    top: 562px;
    left: 0px;
    background-color: #ebebeb;
    border-radius: 0px 0px 15px 15px;
    z-index = 5;
}

.fieldName {
    position: absolute;
    height: 22px;
    width: 290px;
    top: 75px;
    left: 33px;
    color: #ffffff;
    font-family: 'AkzidenzGroteskBE';
    font-size: 2vw;
    font-weight: 700;
    line-height: 21px;
    text-align: left;
    text-transform: uppercase;
}

.projectName {
    position: absolute;
    height: 71px;
    width: 290px;
    top: 114px;
    left: 33px;
    color: #1b1b1b;
    font-family: 'AkzidenzGroteskBE';
    font-size: 3vw;
    font-weight: 700;
    line-height: 26.346px;
    text-align: left;
    text-transform: uppercase;
}

和 HTML:

<div class="row">
    <div class="col-sm-12">
        <div class="cardContainer">
            <div class="cardFieldColor" style="background-color: blue">
                <div class="fieldName">
                    Technology
                </div>
                <div class="projectName">
                    Create scaling Divs and content
                </div>
            </div>

            <div class="fieldIcon">
                <img class="fieldIconImg" src="https://cdn1.iconfinder.com/data/icons/xcase-icons/48/icon_ui-23-512.png">
            </div>
            <div class="fieldPicture">
                <img class="fieldPictureImg" src="https://www.arhamsoft.com/wp-content/uploads/2017/03/blog-13.jpg">
            </div>

            <div class="stats-1">
              Stats #1
            </div>
            <div class="stats-2">
              Stats #2
            </div>
        </div>
    </div>
</div>
<div class="spacer30"></div>
    <div class="row">
    <div class="col-sm-12">
        <div class="cardContainer">
            <div class="cardFieldColor" style="background-color: red">
                <div class="fieldName">
                    Technology
                </div>
                <div class="projectName">
                    Create scaling Divs and content
                </div>
            </div>
            <div class="fieldIcon">
                <img class="fieldIconImg" src="https://cdn1.iconfinder.com/data/icons/xcase-icons/48/icon_ui-23-512.png">
            </div>
            <div class="fieldPicture">
                <img class="fieldPictureImg" src="https://www.arhamsoft.com/wp-content/uploads/2017/03/blog-13.jpg">
            </div>

            <div class="stats-1">
               Stats #1
            </div>
            <div class="stats-2">
              Stats #2
            </div>
        </div>
    </div>
</div>
<div class="spacer30"></div>

这里有一个Fiddle带底座的设计。这种设计可以在页面上重复多次。

我也意识到我可能不应该为图像甚至内部 DIV 使用固定尺寸，但我不确定如何做到这一点并保持设计的完整性。我开始摆弄 max-width 和 max-height 但无济于事

Answer 1

最终使用基于断点的解决方案解决了这个问题：

使容器成为适用于 laptop/desktop 的 vw * vh 大小，具有最大宽度和最大高度，以防止不必要的大渲染
然后使用 %age 值将所有内部 DIV 定位到它们正确的位置
使用@media，创建了一些尺寸，我将容器的宽度和高度重置为符合原始宽度与高度比例的尺寸。

缩放 Div 屏幕大小，包括子项、文本和图像

Scale Div with screen size including children, text and images

html

css

viewport

scale

responsive