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

news2024/10/11 22:20:59

项目环境:

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.coloradmin.cn/o/1567592.html

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

相关文章

前端三剑客 —— CSS (第三节)

目录 上节回顾&#xff1a; 1.CSS使用有以下几种样式; 2.选择器 1.基本选择器 2.包含选择器 3.属性选择器 [] 4.伪类选择器 &#xff1a; 5.伪元素选择器 ::before :after 3.常见样式的使用 常见样式参考表 一些特殊样式 媒体查询 自定义字体 变换效果 translate&…

OpenHarmony实战:小型系统平台驱动移植

在这一步&#xff0c;我们会在源码目录//device/vendor_name/soc_name/drivers目录下创建平台驱动。 建议的目录结构&#xff1a; device ├── vendor_name │ ├── drivers │ │ │ ├── common │ │ │ ├── Kconfig # 厂商驱动内核菜单入口 │ …

win11安装wsl报错:无法解析服务器的名称或地址

一 说明 项目开发中&#xff0c;需要用到wsl&#xff0c;因此根据wsl官方&#xff08;WSL安装教程&#xff09;命令 wsl --install 进行wsl的安装。而本文主要是记录自己在安装wsl中遇到的问题 “无法解析服务器的名称或地址” 的解决办法。 二 方法一&#xff1a;更改DNS&…

RUST语言基本数据类型认识

1.RUST的基本数据类型参考: 2.使用RUST数据类型声明变量并赋值: let a:i81;//8位有符号整数let a1:u82;//8位无符号整数let b:i161;//16位有符号整数let b1:u162;//16位无符号整数let c:i321;//32位有符号整数let c1:u322;//32位无符号整数let d:i641;//64位有符号整数let d1:u…

【web】nginx+php-fpm云导航项目部署-(简版)

一、yum安装nginx yum -y install nginx 二、php环境安装 2.1 php安装 yum -y install php 2.2 php-fpm安装 yum -y install php-fpm 注&#xff1a;PHP在 5.3.3 之后已经讲php-fpm写入php源码核心了。 2.3 项目依赖的php-xml和php-xmlrpc安装 yum -y install php-…

在Vue2里面加载AntvL7

1、代码块 <template><div ref"mapContainer" style"width: 800vh; height: 100vh; align-items: center; justify-content: center"></div> </template><script> export default {mounted() {this.initMap();},methods: {…

openplc Linux 地址映射io,读写驱动数据等使用记录

1. 上一篇记录 openplc使用C语言文件读写驱动实现基本流程。 openPLC_Editor C语言编程 在mp157 arm板上调用io等使用记录_openplc c 编程-CSDN博客 2. 下面通过映射地址的方式控制io和读写驱动数据。 在runtime 环境的 hardware 硬件配置中 选择 python on Linux(PSM)&#…

Redis常用命令补充和持久化

一、redis 多数据库常用命令 1.1 多数据库间切换 1.2 多数据库间移动数据 1.3 清除数据库内数据 1.4 设置密码 1.4.1 使用config set requirepass yourpassword命令设置密码 1.4.2 使用config get requirepass命令查看密码 二、redis高可用 2.1 redis 持久化 2.1.1 持…

PS从入门到精通视频各类教程整理全集,包含素材、作业等(7)复发

PS从入门到精通视频各类教程整理全集&#xff0c;包含素材、作业等 最新PS以及插件合集&#xff0c;可在我以往文章中找到 由于阿里云盘有分享次受限制和文件大小限制&#xff0c;今天先分享到这里&#xff0c;后续持续更新 PS敬伟01——90集等文件 https://www.alipan.com/s…

日历插件fullcalendar【前端】

日历插件fullcalendar【前端】 前言版权开源推荐日历插件fullcalendar一、下载二、初次使用日历界面示例-添加事件&#xff0c;删除事件 三、汉化四、动态数据五、前后端交互1.环境搭建-前端搭建2.环境搭建-后端搭建3.代码编写-前端代码fullcalendar.htmlfullcalendar.js 4.代码…

vue项目引入微信sdk: npm install weixin-js-sdk --save报错

网上查到要用淘宝的镜像 同事告知旧 域名&#xff1a;https://registry.npm.taobao.org/已经不能再使用 使用 npm config set registry http://registry.npmmirror.com

DTFT及其反变换的直观理解

对于离散时间傅里叶变换(DTFT)及其反变换的讲解&#xff0c;教材里通常会先给出DTFT正变换的公式&#xff0c;再举个DTFT的简单变换例子&#xff0c;推导一下DTFT的性质&#xff0c;然后给出DTFT反变换的公式&#xff0c;再证明一下正变换和反变化的对应关系。总的来说就是&…

MySQL版本特性和存储引擎选择

MySQL版本特性和存储引擎选择 1.说一下MySQL 5.5 5.6 5.7 8.0 各个版本的特性 MySQL 5.5 优点: 稳定性&#xff1a;5.5版本是长期支持&#xff08;LTS&#xff09;版本&#xff0c;因此它非常稳定&#xff0c;被广泛部署在生产环境中。兼容性&#xff1a;与旧版本的MySQL和…

索引的概念

索引的概念    1.索引是一种可选的与表相关的数据库对象&#xff0c;用于提高数据的查询效率。    2.索引是一种有序的数据结构。    3.如果一个表没有创建索引&#xff0c;则对该表进行查询时需要进行全表扫描&#xff1b;如果创建了索引&#xff0c;则在有条件查询时…

http模块 设置资源类型(mime类型)

虽然浏览器自带websocket功能它会根据响应回来的内容自动去判断资源类型&#xff0c;但是我们加上了mime类型判断代码会更加规范些 一、mime类型概念&#xff1a; 媒体类型是一种标准&#xff0c;它用来表示文档。文件、字节流的性质和格式。HTTP服务可以设置响应头Content-T…

WebKit简介

1、简介&#xff08;WebKit&#xff09; WebKit 是一个开源的浏览器引擎&#xff0c;最初由苹果公司基于KHTML&#xff08;K Desktop Environment的HTML渲染引擎&#xff09;开发&#xff0c;并广泛应用于Safari浏览器&#xff0c;后来也被其他多款浏览器和应用采用。WebKit负…

【管理咨询宝藏48】AA银行信息科技提升分析报告

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏48】AA银行信息科技提升分析报告 【格式】PPT版本&#xff0c;可编辑 【关键词】战略规划、商业分析、管理咨询 【强烈推荐】这是一套市面上非常…

【介绍什么是DDOS】

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

Swin_transformer模型解析

目录 •1、网络整体框架 •2 、Patch Merging •3 、W-MSA MSA模块计算量 W-MSA模块计算量 •4、 SW-MSA •5 、Relative Position Bias •1、网络整体框架 •2 、Patch Merging 这里看着挺复杂&#xff0c;其实就相当于先对特征图进行LayerNorm&#xff0c;然后再进行一…

PDF编辑和格式转换工具 Cisdem PDFMaster for Mac

Cisdem PDFMaster for Mac是一款功能强大的PDF编辑和格式转换工具。它为用户提供了直观且易于使用的界面&#xff0c;使常用功能触手可及&#xff0c;从而帮助用户轻松管理、编辑和转换PDF文件。 软件下载&#xff1a;Cisdem PDFMaster for Mac v6.0.0激活版下载 作为一款完整的…