Markdown 图片居中/大小/自适应屏幕

2019年12月18日


在编写 Markdown 文档时,插入图片默认靠左,有时候居中可能更合适阅读。

图片居中/居左/居右

CSS 方式

参考 https://jsfiddle.net/tremor/6s30e8vr/

.md文件中:

![my image](https://path/to/sample.png#center)  

.css 文件中:

/** IMAGE CENTERING CSS **/
/** 居中 **/
img[src*='#center'] { 
    display: block;
    margin: auto;
}

此方法好处在于只有指定的图片居中,不需要居中的图片继续默认居左。下面的方式将所有图片居中:

img{
  positon:relative;
  width:80%;
  left:10%;  /*left为(img父元素元素的width - img元素自己的width)÷2*/
}

支持原生HTML标记情况

图片居中:

<div align="center">
    <img src="http://path/to/sample.png" height="300" width="300" >
    <img src="http://path/to/sample.png" height="300" width="300" >
    <img src="http://path/to/sample.png" height="300" width="300" >
</div>

图片居左:

<div align="left">
    <img src="http://path/to/sample.png" height="300" width="300" >
</div>

图片居右:

<div align="right">
    <img src="http://path/to/sample.png" height="300" width="300" >
</div>

图片大小

<img src="http://path/to/sample.png" width="100px" height="100px" alt="图片名称">
<img src="http://path/to/sample.png" width="30%" height="30%" alt="图片名称">

图片自适应屏幕

/** 所有图片 **/
img{
    max-width: 100%;
    height: auto;
}

/** 文章主体内容区域内(<div id="post_body">文章主体内容</div>),自适应屏幕 **/
#post_body img{
    max-width: 100%;
    height: auto;
}
慢读 慢生活

Slow Rhythm of Life.