javascript - 图像上的响应式文本区域(引导程序)
问题描述
不知何故,我无法弄清楚。大家好。
我有一个简单的前端,下面有一个导航栏和 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); 开,但这也会缩小图像。
也许你们中的某个人可以给我一些思考的食物。
所以我的目标是,如果窗口调整大小,输入字段也会最小化重新定位。
这是我正在使用的示例代码:
<!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>
最诚挚的问候。
解决方案
这真的很简单。不要添加position:absolute
,<input>
但要使用<div>
它。
你需要一个<div>
withposition:relative
作为容器。添加带有类的图像w-100 d-block
以使其具有响应性。创建一个<div>
叠加层并将内容放入其中。<input>
并且默认情况下将具有<textarea>
类。.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>
推荐阅读
- node.js - Dialogflow 系统实体 sys.any 在字母数字文本中的数字前添加空格
- excel - 在 VBA 中将单元格或范围声明为变体
- ios - 从枚举中设置 UISegmentedControl 的标题(内置于 IB,而不是代码)
- c# - 查询已删除的列
- aws-lambda - KeyError:AWS Lambda 中的“记录”
- php - 如何在 git 中包含 WordPress 插件更改和相关的数据库迁移?
- ios - 快速按钮单击以显示带有工具栏视图的键盘
- typescript - 如何使用带有 Typescript 的 expo AppLoading 组件?
- javascript - 使用整数数组参数的排序函数不起作用
- sql - 查找所有开头包含“+7”的数字