cnblogs記事/値下げ幅に画像を調整するには?

序文

値下げは、手動で画像のみを調整するには、文書が書かれている必要性を公開します。その理由は、画像がブラウザの不便を引き起こして、画面いっぱいになる、画像の挿入デフォルトが大きすぎるということです。
個人的な経験:一般的な横画面の下に、画像が画面の高さの2/3を超えてはならない、本文の内容は、画面の幅の2/3を超えてはなりませんので、お好み次第ほとんどを参照します。

使用して、ローカルのノートエディタV注は、私の時間の長い期間の後、クエリ、スクリーニングおよび試験である、と値下げ編集ソフトの安定的な使用を好みます。、スピード、値と色のカスタマイズの両方を他のものより便利に使用します。
地元の絵にあるので、た.md文書にV注は、テキストのように一枚で、インターネットに直接コピーし、その後、処理される必要があります。
![](_v_images/20190906211935038_10173.png =460x)
ローカルスタイルノートと全く同じには表示され、あるいはいくつかの時間、非常にイライラするプロセスを取ります。

プロセス

TinyMCEは、Markdownを、テキストボックス、次のように個人的な理解:裏庭ブログ、3つのオプションのエディタがあります。

  • TextBoxの Windowsのメモ帳では、最も合理化(関数最小値)のように、考慮されていません。

  • TinyMCEの類似語、リッチテキストエディタ、最も汎用性の高い(また、マルチボタン)。
    このエディタでは、画像の大きさを手動で調整挿入が、不正確させることができます。しかし、あなたはPNGを検索し、HTMLソースコードエディタを入力することができ、ALTで=「」、挿入幅=「500」。
    この方法では、需要の問題を達成することができますが、場所の絵の絵、そしてその後、後続の各側面のためのコードを追加する必要がありました写真の束を見つける必要があります。
    排出されていなくても、実際には正規表現で、必要の面倒な手順は、それぞれがこのような場合は、その後の投稿を考えていたが、この方法にも合格します。

  • MarkDown 不用多说了,互联网使用最多不敢说,但应该是现在最为推崇的一种码字写文方式,用内容控制样式。
    方便程度介于前两者之间,其实对我来说有时候还是比较麻烦的,ahk的简化输入帮了很大的忙。
    目前还没有找到在博客园的MarkDown编辑器内修改图片宽度的方法。
    例如下图第一三四行这样的写法,图片无法正常显示,第二行的图片可以正常显示。

解决

寻求问题解决办法,搜索引擎。主要参考了这个问题下的回答,五花八门,在博客园编辑器试了下。
Markdown中插入图片怎么定义图片的大小或比例?

  1. 嵌入HTML代码,使用img标签,加上width = "300",或者width = "80%" 。
    <img src="./xxx.png" width = "300" height = "200" alt="图片名称" align=center />
    已经属于HTML的属性了,能修改。其实MarkDown内也有效,但不是原生的,总感觉不太好。
    实在没办法的话,就用它吧,需要将MarkDown的![]()标签转化为HTML的img标签。
    当然是得批量处理,正则表达式出手,除了!,[]()都需要用\进行转义
    方括号跟圆括号在Markdown里面也需要转义,上面偷懒直接代码表示了,实际得输入对应的ASCII码
    查找^!\[\]\((.*cnblogs.com/blog/.*)\),替换<img src="$1" width = "500" />
    对比一下,第一行是默认上传后的,第二张是处理后的。
    ![](https://img2018.cnblogs.com/blog/1816212/201911/1816212-20191106005633853-668571180.png)

    <img src="https://img2018.cnblogs.com/blog/1816212/201911/1816212-20191106005633853-668571180.png" width = "500" />

    此方法好处在于能够精确修改每一张图片的大小,配合Quicker的快捷操作一点都不麻烦,最优解。

  2. 使用支持图片大小更改操作的 Mou 编辑器,加上=100x100。
    ![](./pic/pic1_50.png =100x100)
    此方法在本地能生效,按理来说是最有希望的,但是在博客园的MarkDown编辑器内失效。

  3. 在图片后面加上对应的CSS样式,加上{:height="100px" width="400px"}。
    ![test image size](url){:height="100px" width="400px"}
    在博客园的MarkDown编辑器内无效,经查询是kramdown中InlineAttribute的特性

  4. 找一个支持参数的图床,比如七牛,具体参见图片基本处理 (imageView2)
    http://siwangxinyuan.qiniudn.com/jianshu-42-1280x800-%5BDesktopNexus.com%5D.jpg?imageView/2/w/619/q/90
    非特殊需求,博客园发文就不用图床外链了,不好管理,而且直接复制图片更方便。

  5. mweb编辑器,加上-w数字,数字为缩放大小。
    ![知乎头像-w70](https://pic3.zhimg.com/v2-0a80d2f61233518a3719179a045c41b2_xl.jpg)
    此种方法应该是知乎的MarkDown编辑器支持。不过博客园的测试了下,果然不行。

  6. 直接修改css文件,添加图片样式,再在MarkDown内应用。
    img[src*="#width-full"] { width: 100%; } ![trump.jpg](https://view.moezx.cc/images/2018/05/27/trump.jpg#width-full)
    可以添加几种常用的样式,对图片进行操作,除了高宽,其他css样式也可以应用。

  7. 直接修改css文件,对图片的最大宽度进行限制。
    img { max-width: 80%; }
    此方法应该是次优解,避免部分图片默认尺寸过大同时不影响其他图片大小。完善之后,能够一劳永逸~

拓展

完整版·Markdown 语法说明(简体中文版)

到目前为止, Markdown 还没有办法指定图片的宽高,如果你需要的话,你可以使用普通的 标签。

原来在保存的这篇MD语法中,已经说明了这个问题。个人觉得算是Markdown本身的一个瑕疵吧,毕竟这个问题能原生解决的话,对于纯MD文档的写作已经预览效果都是更好的。
而且对于像我这种强迫症来说,这个问题MD不解决,有点小遗憾,希望原生也能支持修改图片高宽样式。

挖坑

在以上尝试过程中,新问题冒出来了:Mou编辑器、mweb编辑器,kramdown是什么,与MarkDown有什么联系与区别?
再多一点的问题,各类文本编辑器与其渲染效果,有哪些坑?有没有像浏览器与渲染样式那种测评表格?(想法太多了,别打我(;≧皿≦))

おすすめ

転載: www.cnblogs.com/ds37/p/11802849.html