如何阻止 canvas 在引导程序中溢出容器 div
[英]how to stop canvas from overflowing a container div in bootstrap
问题描述
简而言之，我有一个 canvas 帽子有一个动态变化的宽度，它不会改变太多，它的默认尺寸是 400x550。 它显示图像并提供用于打印图像的 UI。 在桌面上它看起来很棒，但在移动设备上它会将 canvas 绘制到容器的空白之外，并且想知道是否有办法修复它。
<div class="container pt-4" id="mainUI" style="margin-top: 5%; background-color: #EEEEEE;">
<div class="row">
<div class="colmatt
<div class="card-deck">
<div class="card mb-4">
<div class="card-body">
<h1>Print</h1>
<p class="card-text font-weight-bold">
Supported File Types (CGM, PDF, PS, SVG, DWG, TIF, PNG, JPG, BMP, GIF)
</p>
<!--Choose file -->
<div class="input-default-wrapper span-browse">
<input type="file" id="upload" name="filetoupload" class="input-default-js btn btn-primary" onChange="sendFile();" />
</div>
<form method="POST" action="/fileUpload"
enctype="multipart/form-data" id="fileUploadForm">
<div class="form-row mb-1">
</div>
<div class="file_upload" id="file-upload"
style="display:none;">
<span class="blink_text">Uploading File. This can take a
few minute...</span>
</div>
<div class="file-data" id="file-ident"
style="display:none;">
<b style="font-size: medium;" class="form-
label">Printer:
</b>
<col-10>
<select class="custom-select custom-select-sm"
name="selectedPrinter" id="selectedPrinter"
onchange="SetPaper(), drawPaper();">
<option value="1" selected>HP Laserjet
6i</option>
<option value="2">Canon TX 7100</option>
</select>
</col>
<div class="form-row mb-1">
<b for="MediaSize" style="font-size: medium;"
margin: auto; class="form-label">Paper:
</b>
<div class="col-4">
<select class="custom-select custom-select-sm"
id="MediaSize"
onChange="drawPaper(jsonObj);">
<option value="36 inch Roll" selected>36
inch Roll</option>
<option value="24 inch Roll">36 inch
Roll</option>
</select>
</div>
</div>
<div class="row">
<input id="filename" type="text" value=""
class="form-control" name="filename" style=" display:none;">
<input id="oname" type="text" value="" class="form-
control" name="oname" style=" display:none;">
<div class="col-6 my-2col-6 my-2 ">
<div class="card-deck text-left my-2">
<div class="card box-shadow">
<div class="card-header">
<h6 class="my-0 font-weight-
bold">File Properties</h6>
</div>
<div class="card-body">
<ul class="list-unstyled">
<li class="col text-left font-
weight-bold" id="ident"></li>
<li class="col text-left"
id="dimensions"></li>
<li class="col text-left"
id="resolution"></li>
<li class="col text-left"
id="pages"></li>
<li class="col text-left"
id="filename" style=" display:none;"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-2 " id="file-">
<canvas class="cgm" id="pvCanvas" width="400"
height="550"
style="position: static; background: transparent;
left: 0; right: 0; margin: auto; z-index: 1; margin-top: 0px; margin-bottom: -10px;
border:
1px solid #000000; "></canvas>
<div class="form-row">
<canvas class="canvas" id="canvas1" width="400"
height="30"
style="position: static; background:
transparent; left: 0; right: 0; ; z-index: 1; margin-left: 5px; margin-top: 2px;
border:
1px solid #000000; "></canvas>
</div>
</div>
</div>
</div>
<!--This section is data specific, the ID of each DIV is the
filetype -->
<div class="file-data" id="file-common">
<h4 class="mt-4">Print Options</h4>
<div class="row">
<div class="col-3">
<div class="input-group">
<label class="input-group-addon">Scale(%)
</label>
<input id="ScaleFactor" type="number"
step="any" value="100" class="form-control" onchange="scaleF()" name="Scale">
</div>
</div>
<div class="col-3">
<div class="input-group">
<label for="mode" class="input-group-
addon">Color</label>
<select class="custom-select d-block w-30"
id="mode" onchange="drawPaper()" name="mode">
<option value="RGB">Full</option>
<option value="BW">Monochrome</option>
<option value="GRAY">Greyscale</option>
</select>
</div>
</div>
<div class="col-3">
<div class="input-group">
<label for="Resolution" class="input-group-
addon">Quality</label>
<select class="custom-select d-block w-30"
id="Resolution" name="Resolution">
<option value="150">Low</option>
<option value="300">Medium</option>
<option value="600">High</option>
</select>
</div>
</div>
<div class="col-3">
<div class="input-group">
<label for="Orient" class="input-group-
addon">Orientation</label>
<select class="custom-select d-block w-30"
id="orientation" onchange="drawPaper()" name="Orient">
<option>0</option>
<option>90</option>
<option>180</option>
<option>270</option>
</select>
</div>
</div>
<div class="col-3">
<div class="input-group">
<label for="Orient" class="input-group-
addon">Image Width </label>
<input id="ImageWidth" type="number"
step="any" value="0" onchange="imgW()" class="form-control" name="Scale">
</div>
</div>
<div class="col-3">
<div class="input-group">
<label for="Orient" class="input-group-
addon">Image Height </label>
<input id="ImageHeight" type="number"
step="any" value="0"onchange="imgH()" class="form-control" name="Scale">
</div>
</div>
<div class="col-3">
<div class="input-group">
<div class="form-check form-check-inline">
<input class="form-check"
onchange="Aspect(this)" type="checkbox" id="AspectRatio"
checked >
<class="form-check-label"
for="AspectRatio" style="font-size: medium; padding: 5px;">
Aspect Ratio
</div>
</div>
</div>
</div>
</div>
<!--end visibility zone -->
<hr />
<button class="btn btn-primary" type="button"
onclick="save2JSON();" id="btn_Print" value="Print">Print</button>
<button class="btn btn-success" type="button" onclick="
checkForfile(jsonstr);">Preview</button>
<input class="btn btn-secondary" type="reset"
onclick="cleanUp();"value="Reset">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container py-2" id="mainUI1" style="background-color: #F5F5F5;">
<div class="container py-2" id="container"></div>
</div>
<div class="container py-2" id="mainUI2" style="background-color: #F5F5F5;">
<div class="row">
<div class="col text-center">
<small>
Toll Free: 1800 000 000| Email: <a
href="mailto:example@example.com">example@example.com</a><br>
©2022 , Inc. All rights reserved.
</small>
</div>
</div>
</div>
0 个解决方案
当网页响应时，有没有办法阻止特定的 div 容器溢出？
[英]Is there a way to stop a particular div container from overflowing when the webpage is responsive?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.