堆栈内存溢出
  简体   繁体   English

如何调整svg的大小以适应div？

[英]How to resize a svg to fit inside a div?

 原文  2016-07-08 09:51:18  8   1    javascript/ jquery/ css/ css3/ svg

问题描述

on trying fitting in to div(with border) svg is cut off from the right size. 试图装入div（带边框）svg从正确的尺寸切断。

PEN 钢笔

HTML HTML 

 <div style="position:relative;width:550px;height: 500px;background: gainsboro;border: 4px solid;">

 <-- My SVG -->

 </div>

help me fit this svg in 550x500 帮我在550x500中安装这个svg

1 个解决方案

解决方案1
 5 已采纳  2016-07-08 09:55:36

Don't use width or height in your SVG. 不要在SVG中使用width或height 。

Use viewbox instead. 请改用viewbox 。 Then the SVG will scale automatically (mostly). 然后SVG将自动缩放（大部分）。

<svg xmlns="http://www.w3.org/2000/svg" viewbox ="0 0 959 593">

Codepen Demo Codepen演示

如何调整羽毛笔编辑器的大小以适应<div> ?</div><div id="text_translate"><p> 我希望羽毛笔编辑器自动适应父&lt;div&gt;元素。</p><p> 我创建了&lt;div&gt;元素，并在其中再次创建了一个&lt;div&gt;元素，该元素将成为 quill 编辑器的容器。 工具栏是自动创建的。 我使用 css 将父&lt;div&gt;元素的大小调整为width:50%和height:50% ，我希望其中的所有内容（羽毛笔编辑器和工具栏）都适合其中，但是羽毛笔编辑器的某些部分会出现父&lt;div&gt;元素的。</p><p> <strong>HTML：</strong></p><pre class="lang-html prettyprint-override"> &lt;,-- parent div element: in which quill editor should fit --&gt; &lt;div id="parent" style="width;50%:height;70%:border:2px solid green"&gt; &lt;!-- Quill editor div --&gt; &lt;div id="editor"&gt; &lt;/div&gt; &lt;/div&gt;</pre><p> <strong>Javascript：</strong></p><pre> var tool = [[{ 'header': '1' }, { 'header': '2' }], [{ size: ['small', false, 'large', 'huge'] }], ['bold', 'italic', 'underline', 'strike'], [{ 'color': [] }, { 'background': [] }, { 'font': [] }, { 'align': [] }], ['image',]]; var option = { placeholder: 'Compose an epic...', theme: 'snow', modules: { toolbar: tool }, bounds:'#parent' }; var quill = new Quill('#editor', option);</pre><p> 我在父 div 周围放了一个绿色边框，我发现编辑器从边框出来了。 请看截图：</p><p> <a href="https://i.stack.imgur.com/RlASQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RlASQ.png" alt="截屏"></a></p><p> 注意：我只想保持父 div 的大小固定。 所以，请告诉我该怎么办？</p><p> 编辑：我将整个代码（html 文件）上传到我的服务器（<a href="http://tu.unaux.com/game.html" rel="nofollow noreferrer">这里</a>）。 问题仍然存在。 请检查一下，您可以使用“检查元素”查看整个代码。</p></div> - How to resize quill editor to fit inside a <div>?

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何调整大svg的大小以适应div - how to resize a large svg to fit inside a div 如何调整羽毛笔编辑器的大小以适应<div> ?</div><div id="text_translate"><p> 我希望羽毛笔编辑器自动适应父&lt;div&gt;元素。</p><p> 我创建了&lt;div&gt;元素，并在其中再次创建了一个&lt;div&gt;元素，该元素将成为 quill 编辑器的容器。 工具栏是自动创建的。 我使用 css 将父&lt;div&gt;元素的大小调整为width:50%和height:50% ，我希望其中的所有内容（羽毛笔编辑器和工具栏）都适合其中，但是羽毛笔编辑器的某些部分会出现父&lt;div&gt;元素的。</p><p> <strong>HTML：</strong></p><pre class="lang-html prettyprint-override"> &lt;,-- parent div element: in which quill editor should fit --&gt; &lt;div id="parent" style="width;50%:height;70%:border:2px solid green"&gt; &lt;!-- Quill editor div --&gt; &lt;div id="editor"&gt; &lt;/div&gt; &lt;/div&gt;</pre><p> <strong>Javascript：</strong></p><pre> var tool = [[{ 'header': '1' }, { 'header': '2' }], [{ size: ['small', false, 'large', 'huge'] }], ['bold', 'italic', 'underline', 'strike'], [{ 'color': [] }, { 'background': [] }, { 'font': [] }, { 'align': [] }], ['image',]]; var option = { placeholder: 'Compose an epic...', theme: 'snow', modules: { toolbar: tool }, bounds:'#parent' }; var quill = new Quill('#editor', option);</pre><p> 我在父 div 周围放了一个绿色边框，我发现编辑器从边框出来了。 请看截图：</p><p> <a href="https://i.stack.imgur.com/RlASQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RlASQ.png" alt="截屏"></a></p><p> 注意：我只想保持父 div 的大小固定。 所以，请告诉我该怎么办？</p><p> 编辑：我将整个代码（html 文件）上传到我的服务器（<a href="http://tu.unaux.com/game.html" rel="nofollow noreferrer">这里</a>）。 问题仍然存在。 请检查一下，您可以使用“检查元素”查看整个代码。</p></div> - How to resize quill editor to fit inside a <div>? 使溢出调整大小以适应div内部 - Making overflow resize to fit inside div 如何调整png图像的大小以适合div？ - How to resize a png image to fit in a div? 如何调整 CKEditor 的大小以适合其父 div - How to resize CKEditor to fit its parent div CSS - 添加更多正方形时，如何使正方形/正方形适合并在 div 内调整大小？ - CSS - How to make a square/squares fit and resize inside a div when added more squares? 调整文字大小以适合div - Resize text to fit div 调整div以适应屏幕 - Resize div to fit screen 如何在 SVG 多边形内放置和换行文本 - How to fit and wrap text inside SVG polygon 如何将整个路径放入 svg - How to fit entire path inside the svg
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM