在线笔记

Markdown中设定图片位置和大小

样式

    /* 样例说明：以下样例用于设置文章中图片的大小和位置 */
    img {
      max-width: 100%; /* 图片最大宽度为其容器的100%，即自动缩放以适应容器 */
      height: auto; /* 保持图片原始宽高比 */
      display: block; /* 防止图片下方出现空白 */
      margin: 0 auto; /* 水平居中图片 */
    }
    .imgcontainer { /* 图片位置设置居中，配合imgbox可设定图片大小 */
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
    }
    .imgbox-30 {
      width: 30%; /* 盒子宽度占容器30% */
      height: 30%; /* 盒子高度占容器30% */
      background-color: lightblue; /* 背景颜色 */
    }
    .imgbox-50 {
      width: 50%; /* 盒子宽度占容器50% */
      height: 50%; /* 盒子高度占容器50% */
      background-color: lightblue; /* 背景颜色 */
    }
    .imgbox-80 {
      width: 80%; /* 盒子宽度占容器80% */
      height: 80%; /* 盒子高度占容器80% */
      background-color: lightblue; /* 背景颜色 */
    }    

示例1

<div class="imgcontainer">
<div class="imgbox">

![图片标题](https://www.heyanper.top/api/images/img_10001.jpg){width=600px}

</div>
</div>

示例2

<div class="imgcontainer">
<div class="imgbox">

![图片标题](https://www.heyanper.top/api/images/img_10001.jpg){width=300px}

</div>
</div>

示例3

<div class="imgcontainer">
<div class="imgbox-80">

![图片标题](https://www.heyanper.top/api/images/img_10001.jpg)

</div>
</div>

网页中设定图片位置和大小

<div class="imgcontainer">
<div class="imgbox"><img src="http://www.heyanper.top/images/g3.jpg" alt="" width="640" height="426"></div>
</div>