PHP笔记网

革命尚未成功,同志仍须努力下载JDK17

作者:Albert.Wen  添加时间:2024-04-06 18:04:07  修改时间:2024-12-25 16:00:37  分类:05.前端/Vue/Node.js  编辑

问题描述

![img](url)的格式怎么添加设置图片大小的参数?莫非只能用html来实现?

解决方案

可以用 CSS attribute selector 实现:

img[src*="#width-full"] {
    width: 100%;
}

Markdown 写法:

![trump.jpg](https://view.moezx.cc/images/2018/05/27/trump.jpg#width-full)

间接为图片加上一个 class,该技能可叠加使用。如果喜欢,你当然可以在 stylesheet 里给每个尺寸写上一条。

 

再扩展一下吧:

/* 限制图片宽带 */
img[src*="#w90"] {
    max-width: 90%;
}
img[src*="#w80"] {
    max-width: 80%;
}
img[src*="#w70"] {
    max-width: 70%;
}
img[src*="#w60"] {
    max-width: 60%;
}
img[src*="#w50"] {
    max-width: 50%;
}
img[src*="#w40"] {
    max-width: 40%;
}
img[src*="#w30"] {
    max-width: 30%;
}

 

 

参考:https://www.zhihu.com/question/23378396/answer/402528770