Take this girl plans to test
html img tag
1. In accordance with the size change image size
- with
<img src="图片路径" width="200px" height="200px" alt="图片名称" align=center /> - with
<img src="图片路径" width="200" height="200" alt="图片名称" align=center /> - with
<img src="图片路径" width=200 height=200 alt="图片名称" align=center /> - The same
<img src="图片路径" width=200px height=200px alt="图片名称" align=center />
if you want the picture on the right and need to be changed to right center
rest assured that I checked, like this:
2. Change the picture according to the ratio of the size
The best: zoom zoom
under the same <img src="图片路径" style="zoom:20%" alt="图片名称" align=center>
above <img src="图片路径" style="zoom:20%" alt="图片名称" align=center />
label is self-closing little effect. It is suggested that the self-closing
same effect both, and the second zoom scale, is more convenient than the first size change. Can be used in mainstream markdown editing environment, such as CSDN, garden blog, I know almost.
Followed by: two-dimensional scaling <img src="图片路径" width="20%" height="20%" alt="图片名称" align=center />
two dimensions must be changed, write them more trouble
This time, for the first time found zoom and width & height scale in the same proportion, the effect is different, please note
❌ continue makedown properties
Baidu Experience: markdown file, the general display manner, it is now only coupled to give
{class} on the line form. This markdown can be used in simple books and other platforms.
{: width = "200px" height = "200px"}
{: style = "Zoom: 40%"}
in the blog editor MarkDown Park invalid, the query is a characteristic of kramdown in InlineAttribute.
Sorry, these two will not work in the garden blog, meaning that the blog garden, like the picture changes,I can only use html semantic, makedown not
❎ too much trouble: a wrap with a div html
For example set to the middle, out of the picture surrounded by a div tag can be, but div wrap too much effort, it is better first to facilitate direct plus class, to talk about the rounding
<div align="center"><img src="图片链接" width="20%" height="20%" /></div>
The view of an alternative use,Again found zoom and width & height scale in the same proportion, the effect is different, please note
Not suitable beautify the garden blog user, other users can try
img {
max-width: 80%;
}
This method should be the second-best solution, part of the picture to avoid default size is too large, the size of the image without affecting the other. Skilled, once and for all ~
- How this sub-optimal solution to be used directly makedown in it?
Plus style tags can be used in makedown years. And JavaScript code with "script" tag can also be used in makedown years, a principle
<style>img{max-width:80%;}<style/> - W3Cschool excerpt: max-width defines the maximum width of the element. The attribute value width setting element have a highest limit. Thus, the element can be narrower than the specified value, but not wider than that. Not allowed to specify a negative value.
% - percentage based on the definition of the maximum width of its containing block-level object. - ❎ said they could, but my blog in the garden, landscaping theme is off, once used this code, 90% of the articles will bug.
- ✅ This method can be used to estimate the CSDN and other makedown editor, CSDN bloggers say . No beautify blog Park students can also try "to limit the maximum width of the picture," this method.
❌3. Wording invalid 
! [CSDN written, not] ( https://img2020.cnblogs.com/blog/1735731/202003/1735731-20200327020742887-1728064481.png = 400x300)
! [CSDN centered writing, not] ( HTTPS: //img2020.cnblogs .com / Blog / 1735731/202 003 / 1735731-20200327020742887-1728064481.png pic_center # = 300x300)
