图像上的响应式文本区域（引导程序）

Question

不知何故，我无法弄清楚。 大家好。

我有一个简单的前端，下面有一个导航栏和 2 个列。 左边的 col 有 80px 的固定大小，右边有一个里面的图像（所以这个图像是流动的/响应的）。

在图像上添加输入字段根本不是问题，但我的封锁来了。 我无法让输入字段响应图像的大小。

所以我的想法是，获得图像的比例并缩小输入。

JS中这样的东西

$(window).resize(function() {
    // 1192 is the original imagewidth
    let scale  = $(".step:visible").width() / 1192;

    let inputposition = document.getElementById(testid);
    inputposition .css('transform', 'scale(' + scale + ')');
    inputposition .css('transform-origin', 'top left');
});

现在我想到了 transform: scale(scale); 开，但这也会缩小图像。

也许你们中的某个人可以给我一些思考的食物。

所以我的目标是，如果 window 调整大小，输入字段也会最小化。

这是我正在使用的示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Test</title>

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
    <script src="assets/js/jquery.min.js"></script>
</head>

<body>
    <nav class="navbar navbar-light navbar-expand-lg bg-danger clean-navbar">
        <div class="container"><a class="navbar-brand logo" >Test</a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="nav navbar-nav ml-auto">
                </ul>
            </div>
        </div>
    </nav>
    <main class="page landing-page">
        <section class="clean-block clean-info dark" style="padding: 0px;">
            <div class="container" style="">
                <div class="row align-items-start" style="">
                    <div id="sidebar" class="col-1 d-md-flex flex-grow-0 flex-shrink-0 bg-danger active" style="max-width: 80px;min-width: 80px;height: 100%;padding:0px">
                        <ul class="list-unstyled components" style="padding:0px">
                            <li class="active" id="page1_li" style="position: relative; padding: 10px;">
                                <a onclick="function(this);" id="page1">
                                    <img src="thumb_page1.jpg" class="img-fluid" alt="Responsive image" style="width:100%">
                                    <div class="overlay">
                                        <i id="overlay_page<?= $i ?>" class=""></i>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col text-center bg-primary" style="padding: 0px;">
                        <form class="form-horizontal form" action="submit.php" method="post">
                            <div class="step " id="page1">
                                <div class="fullpage" style="" data-fullpage="fullpage">

                                    <img class="img-thumbnail align-items-center" src="page1.jpg" alt="" draggable="false" contenteditable="false">

                                    <!-- input that needs to be scaled -->
                                    <input type="textarea" id="testid" name="testid" value="" style="position:absolute;left:100px;top:150px;width:300px;height:100px">

                                </div> 
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

最诚挚的问候。

Answer 1

这真的很简单。 不要将position:absolute添加到<input>但使用<div> 。

您需要一个带有position:relative的<div>作为容器。 添加具有w-100 d-block类的图像以使其响应。 创建一个<div>叠加层并在其中放置内容。 <input>和<textarea>与 class .form-control默认具有width:100% 。

 /*DEMO*/body{padding:3rem} #overlay{ position:absolute; top:50%; right:3rem; left:3rem; transform:translateY(-50%); }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <div class="position-relative"> <img class="w-100 d-block" src="https://via.placeholder.com/400x300/007bff/ffffff" alt=""> <div id="overlay"> <input class="form-control" placeholder="Lorem Ipsum"> <hr> <textarea class="form-control" placeholder="Lorem Ipsum"></textarea> </div> </div>

图像上的响应式文本区域（引导程序）

问题描述

1 个解决方案

解决方案1
0 2020-05-31 23:51:31

图像上的响应式文本区域（引导程序）

问题描述

1 个解决方案

解决方案1 0 2020-05-31 23:51:31

解决方案1
0 2020-05-31 23:51:31