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

Question

Somehow i cant figure that out.不知何故，我无法弄清楚。 Hello everyone.大家好。

Ive got a simple frontend with a navbar and 2 Cols underneath.我有一个简单的前端，下面有一个导航栏和 2 个列。 left col got fixed size of 80px, and the right one got an image inside (so this image is fluid / responsive).左边的 col 有 80px 的固定大小，右边有一个里面的图像（所以这个图像是流动的/响应的）。

To add an input field over the image isnt the problem at all, but here comes my blockade.在图像上添加输入字段根本不是问题，但我的封锁来了。 I cant get the inputfield to be responsive to the size of the image.我无法让输入字段响应图像的大小。

So my thoughts was, to get the scale of the image and downscale the input.所以我的想法是，获得图像的比例并缩小输入。

something like this in JS 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');
});

now i thought about transform: scale(scale);现在我想到了 transform: scale(scale); on but this downscales the image too.开，但这也会缩小图像。

maybe someone of you can give me some food for thoughts.也许你们中的某个人可以给我一些思考的食物。

So my goal is, that the inputfield minimizes as well reposition if the window resizes.所以我的目标是，如果 window 调整大小，输入字段也会最小化。

heres the sample code im workin with:这是我正在使用的示例代码：

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

With best regards.最诚挚的问候。

Answer 1

This is really simple.这真的很简单。 Don't add position:absolute to <input> but use <div> for that.不要将position:absolute添加到<input>但使用<div> 。

You need a <div> with position:relative as container.您需要一个带有position:relative的<div>作为容器。 Add image with classes w-100 d-block to make it responsive.添加具有w-100 d-block类的图像以使其响应。 Create a <div> overlay and place content inside.创建一个<div>叠加层并在其中放置内容。 <input> and <textarea> with class .form-control will have width:100% by default. <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