问题解决:写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.mzph.cn/news/792417.shtml

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

相关文章

释放 ChatGPT4 的威力

原文&#xff1a;Unleashing the Power of ChatGPT-4: Strategies for Building a Personal Income Stream 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 I. 介绍 在当今快速发展的数字领域中&#xff0c;人工智能&#xff08;AI&#xff09;已经成为无数行业的重要…

Kubernetes探索-Deployment面试

1. 简述Deployment的升级策略 在Deployment的定义中&#xff0c;可以通过spec.strategy指定Pod更新的策略&#xff0c;目前支持两种策略&#xff1a;Recreate&#xff08;重建&#xff09;和RollingUpdate&#xff08;滚动更新&#xff09;&#xff0c;默认值为RollingUpdate。…

PEFT-LISA

LISA是LoRA的简化版&#xff0c;但其抓住了LoRA微调的核心&#xff0c;即LoRA侧重更新LLM的底层embedding和顶层head。 根据上述现象&#xff0c;LISA提出两点改进&#xff1a; 始终更新LLM的底层embedding和顶层head随机更新中间层的hidden state 实验结果 显存占用 毕竟模型…

RAMS (Mesoscale Model System) 和 WRF 区别

历史和发展&#xff1a; RAMS&#xff1a;RAMS 最早于1970年代由美国科罗拉多州立大学开发&#xff0c;并在之后几十年不断发展壮大。它是最早用于模拟地区尺度大气动力学、热力学和降水过程的模型之一。WRF&#xff1a;WRF 是由美国国家大气研究中心&#xff08;NCAR&#xff…

openstack云计算(一)————openstack安装教程,创建空白虚拟机,虚拟机的环境准备

1、创建空白虚拟机 需要注意的步骤会截图一下&#xff0c;其它的基本都是下一步&#xff0c;默认的即可 ----------------------------------------------------------- 2、在所建的空白虚拟机上安装CentOS 7操作系统 &#xff08;1&#xff09;、在安装CentOS 7的启动界面中…

RuoYi-Vue若依框架-集成mybatis-plus报错Unknown column ‘search_value‘ in ‘field list‘

报错信息 ### Error querying database. Cause: java.sql.SQLSyntaxErrorException: Unknown column search_value in field list ### The error may exist in com/ruoyi/sales/mapper/ZcSpecificationsMapper.java (best guess) ### The error may involve defaultParameter…

C++之STL的algorithm(6)之排序算法(sort、merge)整理

C之STL的algorithm&#xff08;6&#xff09;之排序算法&#xff08;sort、merge&#xff09;整理 注&#xff1a;整理一些突然学到的C知识&#xff0c;随时mark一下 例如&#xff1a;忘记的关键字用法&#xff0c;新关键字&#xff0c;新数据结构 C 的排序算法整理 C之STL的al…

Oracle数据库——分组函数四

12.1什么是分组函数 分组函数作用于一组数据,并对一组数据返回一个值。例如求平均数,最大值等等。 1.组函数类型 AVG :求平均数COUNT :COUNT(expr) 返回expr不为空的记录总数。 MAX 求最大值MIN

【简单讲解下WebSocket】

&#x1f308;个人主页:程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

Vue探索之Vue2.x源码分析(一)

一.响应式数据之数组的处理 <template><div><ul><li v-for"(item, index) in items" :key"index">{{ item }}<button click"removeItem(index)">Remove</button></li></ul><input v-model&…

Python卷积网络车牌识别系统(V2.0)

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

基于单片机的无线红外报警系统

**单片机设计介绍&#xff0c;基于单片机的无线红外报警系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的无线红外报警系统是一种结合了单片机控制技术和无线红外传感技术的安防系统。该系统通过无线红外传感器实…

SpringBoot -- 外部化配置

我们如果要对普通程序的jar包更改配置&#xff0c;那么我们需要对jar包解压&#xff0c;并在其中的配置文件中更改配置参数&#xff0c;然后再打包并重新运行。可以看到过程比较繁琐&#xff0c;SpringBoot也注意到了这个问题&#xff0c;其可以通过外部配置文件更新配置。 我…

鸿蒙系统前端:构建智能互联新时代的界面之美

随着华为鸿蒙系统的推出&#xff0c;前端技术也迎来了新的挑战与机遇。鸿蒙系统&#xff0c;作为华为自主研发的分布式操作系统&#xff0c;旨在打通各类智能设备&#xff0c;为用户提供一个无缝的智能互联体验。在这个宏大的愿景下&#xff0c;鸿蒙系统的前端设计显得尤为重要…

Java作业练习_第六周作业多态性(小白学习记录,仅供参考,有错指出)

题目排序&#xff08;点击直达&#xff09; 第一题第二题第三题第四题第五题第六题第七题第八题免责声明 第一题 写出下列程序的运行结果&#xff1a; package com.cxl.ch5.demo5; public class Base {int m0;public int getM(){return m;} } package com.cxl.ch5.demo5;publ…

第18章 JDK8-17新特性

1. Java版本迭代概述 1.1 发布特点&#xff08;小步快跑&#xff0c;快速迭代&#xff09; 发行版本发行时间备注Java 1.01996.01.23Sun公司发布了Java的第一个开发工具包Java 5.02004.09.30①版本号从1.4直接更新至5.0&#xff1b;②平台更名为JavaSE、JavaEE、JavaMEJava 8…

复杂度的讲解

1.算法效率 如何衡量一个算法的好坏&#xff1f;从两个维度&#xff0c;时间和空间&#xff08;算法运行的快慢&#xff0c;消耗的空间大不大&#xff09;。因为计算机硬件领域的高速发展&#xff0c;如今计算机的存储量已经达到了一个很高的程度&#xff0c;所以现在我们一般…

代码随想录算法训练营DAY15|C++二叉树Part.2|102.二叉树的层序遍历、226.翻转二叉树、101. 对称二叉树

文章目录 102.二叉树的层序遍历思路伪代码迭代法递归法 CPP代码拓展题 226.翻转二叉树思路CPP代码 101. 对称二叉树伪代码CPP代码 102.二叉树的层序遍历 力扣题目链接 文章讲解&#xff1a;102.二叉树的层序遍历 视频讲解&#xff1a;讲透二叉树的层序遍历 | 广度优先搜索 | Le…

微信公众号如何开通留言功能?

首先&#xff0c;我们需要了解为什么现在注册的公众号没有留言功能。这是因为所有在2018年之后注册的微信公众号都无法再自带留言功能。这一变化是根据微信的通知而实施的。自2018年2月12日起&#xff0c;微信对新注册的公众号进行了调整&#xff0c;取消了留言功能。这一决策主…

MySQL - 基础二

6、表的增删改查 CRUD : Create(创建), Retrieve(读取)&#xff0c;Update(更新)&#xff0c;Delete&#xff08;删除&#xff09; 6.1、Create 语法&#xff1a; INSERT [INTO] table_name[(column [, column] ...)]VALUES (value_list) [, (value_list)] ...value_list: v…