问题解决:写CSDN博文时图片大小不适应,不清晰,没法排版

项目环境:

Window10,Edge123.0.2420.65


问题描述:

当我在CSDN写博文的时候,会经常插入一些图片,但有时候我插入的图片太大了,影响了整体排版。
比如我加入了一张图片,就变成了下面这个样子,看起来很不舒服,太大了,还不居中。
Anaconda Prompt


原因分析:

一般情况下,在CSDN中插入的图片都是默认格式。
上传图片到文章时,图片底部都会有一个URL链接,可能CSDN对这个链接进行了处理?
在这里插入图片描述

CSDN给出的上方图片URL:


https://img-blog.csdnimg.cn/20181228220902381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1ZU1hZ2lj,size_16,color_FFFFFF,t_70

通过对图片的URL链接进行修改知道了如下信息:

x-oss-process=image/watermark,代表了: 对图片进行处理,添加水印;
type_ZmFuZ3poZW5naGVpdGk,代表了:图片水印的格式类型为ZmFuZ3poZW5naGVpdGk,base64解码后是“fangzhengzhidao”,即方正字体;
shadow_10,代表了: 图片水印的文字阴影程度为10,可能是深度或者强度,没去认真研究;
text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1ZU1hZ2lj,代表了:图片版权信息或来源链接,base64解码后为“https://blog.csdn.net/Suemagic”;
size_16,代表了: 图片水印的文字大小为16;
color_FFFFFF,代表了:图片水印的文字颜色为FFFFFF;
t_70代表了:图片水印的文字透明度为70;


解决:

CSDN对图片只进行了标准化的水印处理,那我们只能利用HTML/CSS格式引入链接进行图片的宽度调整

①利用HTML格式进行图片的宽度百分比width="30%"调整

宽度调整1:

<img src="https://img-blog.csdnimg.cn/20181228220902381.png" width="30%">
width="300" height="100"

②利用HTML格式进行图片的宽高数值width="300" height="100"调整

宽度调整2:

<img src="https://img-blog.csdnimg.cn/20181228220902381.png" width="300" height="190">

更多效果:

利用HTML/CSS格式引入链接对图片在文章中的位置进行调整,以及给图片备注
对图片的水印进行一个个性化操作

一、图片显示位置调整

①CSDN链接结尾带上#pic_left(居左) 、 #pic_center(居中)、#pic_right(居右)

居右:


https://img-blog.csdnimg.cn/20181228220902381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1ZU1hZ2lj,size_16,color_FFFFFF,t_70#pic_right

Anaconda Prompt

②HTML格式加入center(居中)、left(居左)(没法居右,直接在img标签里加入style="float: left也是没有用的,但是依旧可通过上面的方法,在结尾加上#pic_right来达到居右效果)

居中:

<center><img src="https://img-blog.csdnimg.cn/20181228220902381.png" width="10%"></center>

③HTML格式加入img标签,在URL链接结尾加上#pic_right来达到居右效果

二、图片题注

①HTML格式加入img标签,并在下方加入font标签

题注1:

<center> <img src="https://img-blog.csdnimg.cn/20181228220902381.png" width="10%"> </center><center><b><font size ='3'>图1. 这是图1的题注</font></b></center></font><!--font size = '3',表示文字的大小为3--><!--当然也可以不要,直接用center-->
图1. 这是上面这张图的题注

②HTML格式在您想要添加题注的图片的<img>标签下方,添加一个<figcaption>标签(<figcaption style="font-size: 20px;">没办法更改字体大小)

题注2:


<img src="https://img-blog.csdnimg.cn/20181228220902381.png" alt="图片描述">
<figcaption>图2. 这是上面这张图的题注</figcaption>
Anaconda Prompt
图2. 这是上面这张图的题注

三、图片水印修改(不知道字体格式)

①CSDN链接修改水印阴影

水印阴影修改:shadow_100


<img src="https://img-blog.csdnimg.cn/20181228220902381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_100,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1ZU1hZ2lj,size_48,color_eb3c70,t_100"  alt="图片描述">
<figcaption>图3. 这是上面这张图的题注</figcaption>
Anaconda Prompt
图3. 这是阴影为10
Anaconda Prompt
图4. 这是阴影为100

②CSDN链接修改水印文字

水印文字修改:text_dnhaZVhpbjAy


<img src="https://img-blog.csdnimg.cn/20181228220902381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_100,text_dnhaZVhpbjAy,size_48,color_eb3c70,t_100#pic_center"  width="40%"  alt="图片描述">
<figcaption>图3. 这是上面这张图的题注</figcaption>
Anaconda Prompt
图5. 这是https://blog.csdn.net/Suemagic
Anaconda Prompt
图6. 这是dnhaZVhpbjAy

③CSDN链接修改水印文字大小

水印文字大小修改:size_48


<img src="https://img-blog.csdnimg.cn/20181228220902381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_100,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1ZU1hZ2lj,size_48,color_eb3c70,t_100"  alt="图片描述">
<figcaption>图3. 这是上面这张图的题注</figcaption>
Anaconda Prompt
图7. 这是文字大小为16
Anaconda Prompt
图8. 这是文字大小为48

④CSDN链接修改水印文字颜色

水印文字颜色修改:color_eb3c70


<img src="https://img-blog.csdnimg.cn/20181228220902381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_100,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1ZU1hZ2lj,size_48,color_eb3c70,t_100"  alt="图片描述">
<figcaption>图3. 这是上面这张图的题注</figcaption>
Anaconda Prompt
图9. 这是文字颜色为纯白
Anaconda Prompt
图10. 这是文字颜色为松叶牡丹红

t_70代表了:图片水印的文字透明度为70;

⑤CSDN链接修改水印文字透明度

文字透明度修改:t_10


<img src="https://img-blog.csdnimg.cn/20181228220902381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_100,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1ZU1hZ2lj,size_48,color_eb3c70,t_100"  alt="图片描述">
<figcaption>图3. 这是上面这张图的题注</figcaption>
Anaconda Prompt
图7. 这是文字透明度为100
Anaconda Prompt
图8. 这是文字透明度为10

希望本文对你安装Python的第三方库提供了帮助。
SueMagic wish you a happy coding~
有疑问可联系我。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/593210.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

x86汇编写矩阵乘法问题(实现一个3×3矩阵乘法的汇编代码)

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

微信小程序python+uniapp高校图书馆图书借阅管理系统ljr9i

根据日常实际需要&#xff0c;一方面需要在系统中实现基础信息的管理&#xff0c;同时还需要结合实际情况的需要&#xff0c;提供图书信息管理功能&#xff0c;方便图书管理工作的展开&#xff0c;综合考虑&#xff0c;本套系统应该满足如下要求&#xff1a; 首先&#xff0c;在…

《数据结构学习笔记---第十篇》--- 堆堆排序(超详细图解)

目录 1.堆是什么? 2.问题引入&#xff1a;当我们插入一个新的元素时&#xff0c;那么他还是堆吗。 3.堆的元素插入 4.问题引入&#xff1a;当我们删除一个堆顶元素时&#xff0c;我们又该如何调整呢&#xff1f; 5.堆顶元素删除 6.如何建堆&#xff1f; 6.1向上调整建堆…

图解PyTorch中的torch.gather函数和 scatter 函数

前言 torch.gather在目前基于 transformer or query based 的目标检测中&#xff0c;在最后获取目标结果时&#xff0c;经常用到。 这里记录下用法&#xff0c;防止之后又忘了。 介绍 torch.gather 官方文档对torch.gather()的定义非常简洁 定义&#xff1a;从原tensor中获…

ctf_show笔记篇(web入门---SSRF)

ssrf简介 ssrf产生原理&#xff1a; 服务端存在网络请求功能/函数&#xff0c;例如&#xff1a;file_get_contens()这一类类似于curl这种函数传入的参数用户是可控的没有对用户输入做过滤导致的ssrf漏洞 ssrf利用: 用于探测内网服务以及端口探针存活主机以及开放服务探针是否存…

深入浅出 -- 系统架构之分布式架构

​​​​​​分布式架构&#xff1a; 根据业务功能对系统做拆分&#xff0c;每个业务功能模块作为独立项目开发&#xff0c;称为一个服务。 当垂直应用越来越多时&#xff0c;应用之间的交互不可避免&#xff0c;可将共用的基础服务或核心模块抽取出来作为独立服务&#xff0c…

ubuntu无法粘贴复制windows中的内容,分辨率无法自适应电脑自带系统

1、直接在命令行执行以下命令 sudo apt-get autoremove open-vm-tools //卸载已有的工具 sudo apt-get install open-vm-tools //安装工具open-vm-tools sudo apt-get install open-vm-tools-desktop //安装open-vm-tools-desktop 2、重启Ubuntu系统即可 3.如果上述…

mbti,ESTP型人格的心理问题分析

什么是ESTP型人格 ESTP分别代表外向&#xff0c;实感&#xff0c;理智&#xff0c;依赖&#xff0c;而ESTP型人格则是一种性格上十分激进&#xff0c;喜欢冒险&#xff0c;并且总是因为情绪起伏过大&#xff0c;而一下子做出应激行为的相对冒险的人格。具有ESTP型人格的人一般…

Hadoop-HDFS

资料来源&#xff1a;尚硅谷-Hadoop 一、HDFS 概述 1.1 HDFS 产出背景及定义 1.1.1 HDFS 产生背景 随着数据量越来越大&#xff0c;在一个服务器上存不下所有的数据&#xff0c;那么就分配到更多的服务器管理的磁盘中&#xff0c;但是不方便管理和维护&#xff0c;迫切需要…

Web实例_报表开发01-基于HTML进行报表呈现

Web实例_报表开发01-基于HTML进行报表呈现 报表开发是一种在利用了软件的基础上, 针对不同类型的报表, 进行开放的工作。 而以报表的方式, 将相关的内容、数值呈现出来的话, 则会起到更好的概况作用。 再加上, 报表开发工作是依托于计算机来完成的, 因此在效率、完整性等方面…

Learning To Count Everything

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读&#xff1a;学习数一切东西1、研究背景2、提出方法3、模块详细3.1、多尺度特征提取模块3.2、密度预测模块 4、损失函数5、性能对比6、贡献 二…

《机器学习算法面试宝典》正式发布!

大家好&#xff0c;历时半年的梳理和修改&#xff0c;《机器学习算法面试宝典》&#xff08;以下简称《算法面试宝典》&#xff09;终于可以跟大家见面了。 近年来&#xff0c;很多理科专业学生也纷纷转入算法赛道&#xff0c;特别是最近 ChatGPT 的爆火&#xff0c;推动了AI …