/* ==========================================================================
   文章内图片自定义样式（全局）
   --------------------------------------------------------------------------
   用法一：尺寸工具类（推荐，宽度随正文列自适应）
     {% asset_img my-img fig1-1.png "标题" %}              默认 90% 宽，居中
     {% asset_img my-img w-60 fig1-1.png "标题" %}         宽度 60%，居中
     {% asset_img my-img w-400 fig2-1.png "标题" %}        固定 400px 宽，居中

   用法二：直接在标签里写数字宽度（生成 HTML 的 width 属性）
     {% asset_img my-img fig1-1.png 400 "标题" %}          宽 400px，居中
     数字参数可接两个，依次是宽、高：{% asset_img my-img fig1-1.png 400 300 "标题" %}

   注意：Hexo 的 asset_img / img 标签只认“位置参数”，不能写 class="xxx"，
        而且 class 必须写在图片文件名前面，写在后面会被当成 title。
   ========================================================================== */

/* 基础样式：让所有带 my-img 的图片水平居中
   默认宽度 90%，与主题中“段落内图片”（p > img）的观感保持一致
   不加尺寸类时，截图会等比缩到正文宽度的九成并居中 */
.markdown-body img.my-img {
  display: block;
  /* display:block + 左右 margin 为 auto 即水平居中 */
  margin: 1.5rem auto;
  max-width: 90%;
  height: auto;
}

/* --------------------------------------------------------------------------
   尺寸工具类：按正文宽度的百分比缩放
   加在 my-img 后面，例如 class="my-img w-60"
   -------------------------------------------------------------------------- */
.markdown-body img.my-img.w-25 { width: 25%; max-width: 100%; }
.markdown-body img.my-img.w-33 { width: 33%; max-width: 100%; }
.markdown-body img.my-img.w-50 { width: 50%; max-width: 100%; }
.markdown-body img.my-img.w-60 { width: 60%; max-width: 100%; }
.markdown-body img.my-img.w-66 { width: 66%; max-width: 100%; }
.markdown-body img.my-img.w-75 { width: 75%; max-width: 100%; }
.markdown-body img.my-img.w-80 { width: 80%; max-width: 100%; }
.markdown-body img.my-img.w-90 { width: 90%; max-width: 100%; }
.markdown-body img.my-img.w-100 { width: 100%; max-width: 100%; }

/* --------------------------------------------------------------------------
   尺寸工具类：固定像素宽度（按需自行增删）
   注意 max-width:100% 保证在手机上不会溢出
   -------------------------------------------------------------------------- */
.markdown-body img.my-img.w-300 { width: 300px; max-width: 100%; }
.markdown-body img.my-img.w-400 { width: 400px; max-width: 100%; }
.markdown-body img.my-img.w-500 { width: 500px; max-width: 100%; }
.markdown-body img.my-img.w-600 { width: 600px; max-width: 100%; }

/* --------------------------------------------------------------------------
   可选：想让 my-img 图片和主题里“段落中的图片”外观完全一致
   （圆角 + 阴影），取消下面注释即可
   -------------------------------------------------------------------------- */
/*
.markdown-body img.my-img {
  border-radius: 4px;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
}
*/