移动端适配问题：如何让图片编辑Div区域按比例适配各屏幕尺寸

我正在开发一个支持图片编辑与下载的网站，目前遇到移动端适配问题：图片编辑区域需按比例适配屏幕，但当前该区域超出屏幕显示范围（如图所示）。若使用百分比设置尺寸，会出现文本溢出、图片布局错乱的情况。

相关代码 #

CSS

.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);
}

HTML

<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>

解决方案 #

1. 用视窗单位+比例计算替代固定像素 #

核心是保持编辑区域的原始比例（420:720≈1:1.714），同时适配不同屏幕宽度，避免超出视窗：

.scardbg {
    width: min(90vw, 420px); /* 取视窗90%和420px的较小值，兼顾移动端和桌面端 */
    height: calc(min(90vw, 420px) * 1.714); /* 按比例计算高度 */
    background-color: rgb(91, 48, 24);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* 让容器居中，避免边缘溢出 */
}

2. 调整卡片的宽高限制 #

去掉固定最小宽度，改用相对宽度，同时让卡片高度自适应内容，添加滚动避免溢出：

.scard {
    width: 90%; /* 相对于父容器宽度自适应 */
    max-width: 370px;
    max-height: calc(min(90vw, 420px) * 1.714 - 2rem); /* 减去父容器的内边距，避免超出 */
    height: auto;
    border-radius: 15px;
    background-color: rgb(111, 59, 29);
    overflow-y: auto; /* 内容过多时允许垂直滚动 */
    padding: 1rem; /* 替换原有的m-4，更精准控制内边距 */
}

3. 修复文本与图片的溢出问题 #

针对可编辑文本和图片添加自适应规则：

/* 文本换行处理 */
#sarki, #sanatciisim, #sonuc {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    display: block; /* 确保块级显示，换行正常 */
}

/* 图片自适应容器 */
.simg img {
    max-width: 100%;
    height: auto;
}

4. 小屏设备额外优化 #

通过媒体查询针对极小屏幕调整字体和内边距：

@media (max-width: 320px) {
    .scard {
        padding: 0.8rem;
    }
    #sarki, #sanatciisim, #sonuc {
        font-size: 0.9rem;
    }
}

内容的提问来源于stack exchange，提问作者user18316888