将 div 大小按比例应用到每个屏幕尺寸

Question

我正在开发一个可以编辑和下载图像的网站。然而，可编辑图像的区域的大小在移动视图中应该是成比例的，但它延伸到了屏幕之外。 （正如我在附录中提到的。）如果我使用百分位数，文本就会溢出，图像的流动就会被打乱。

.scardbg
{
    width: 420px;
    height: 720px;
    background-color: rgb(91, 48, 24);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scard
{
    height: auto;
    max-height: 700px;
    max-width: 370px;
    min-width: 370px;
    border-radius: 15px;
    background-color:rgb(111, 59, 29);
}

<div class="col">
    <div class="m-3 scardbg" id="rect">
        <div class="scard m-4" id="scard" style="border-radius: 15px;">
             <div class="stitle">
                 <div class="simg">
                     <p id="output2"><img src="https://via.placeholder.com/80"id="output" /> </p>
                 </div>
                 <div class="stitex text-light">
                      <span id="sarki" contenteditable="plaintext-only">Şarkı İsmi</span>
                      <p id="sanatciisim" contenteditable="plaintext-only">Sanatçı</p>
                 </div>
              </div>
              <div class="slyrics">
                  <span id="sonuc" contenteditable="plaintext-only">Tıkla ve yaz<br>Satır eklemek için enter'a bas<br>Veya sadece kopyala ve yapıştır</span>
              </div>
              <div id="spotilogo"></div>
        </div>
    </div>
</div>

Answer 1

在你的css元素.scardbg中你应该编写以下代码：

width: {preferredSize}%; height: {preferredSize}%;

其中preferredSize是您可以选择的两个不同值。 这样浏览器就会将 div 调整为屏幕的 %size。您应该对scard

做同样的事情