LLWiki正在建设中，欢迎加入我们！
“Widget:OuterImage”的版本间差异
跳转到导航
跳转到搜索
（使用GitHub上的稳定版本 //使用页面/文本对比查看器快速编辑） |
（//使用页面/文本对比查看器快速编辑） |
||
| 第1行： | 第1行： | ||
<noinclude>{{doc|content=用于在讨论页插入外部图片。请使用{{tl|外部图片}}调用。}}[[category:混合小部件]] |
<noinclude>{{doc|content=用于在讨论页插入外部图片。请使用{{tl|外部图片}}调用。}}[[category:混合小部件]] |
||
<p>JavaScript脚本：[[User:Bhsd/widget/outerImage.js]]</p></noinclude><includeonly><img src="https://<!--{$src|escape:urlpathinfo}-->"><!--{if !isset($wgOuterImage) || !$wgOuterImage}--><!--{assign var="wgOuterImage" value=true scope="global"}--><script defer src='/ |
<p>JavaScript脚本：[[User:Bhsd/widget/outerImage.js]]</p></noinclude><includeonly><img src="https://<!--{$src|escape:urlpathinfo}-->"><!--{if !isset($wgOuterImage) || !$wgOuterImage}--><!--{assign var="wgOuterImage" value=true scope="global"}--><script defer src='/zh?title=user:bhsd/widget/outerImage.js&action=raw&ctype=text/javascript'></script><style> |
||
/* </includeonly>CSS样式表：<pre lang="css"> */ |
/* </includeonly>CSS样式表：<pre lang="css"> */ |
||
.outerImage { /* 外层容器，防窄屏上图片过宽 */ |
.outerImage { /* 外层容器，防窄屏上图片过宽 */ |
||
2022年5月17日 (二) 19:52的最新版本
JavaScript脚本：User:Bhsd/widget/outerImage.js
CSS样式表：
*/
.outerImage { /* 外层容器，防窄屏上图片过宽 */
overflow-x: auto;
max-width: 100%;
vertical-align: bottom; /* Safari */
}
.outerImage > div { /* 内层容器，可以裁剪 */
overflow: hidden;
}
.badImage {
position: relative;
pointer-events: none;
width: 50px !important;
height: 50px !important;
}
.badImage::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01NzAgLTgwKSI+PGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGNpcmNsZSBjeD0iNTc5IiBjeT0iOTIiIHI9IjIiPjwvY2lyY2xlPjxwb2x5Z29uIHBvaW50cz0iNTkwLjkwOCw4NiA1OTAuMzE1LDg4IDU5NSw4OCA1OTUsMTAzIDU4NS44NzEsMTAzIDU4NS4yNzgsMTA1IDU5NywxMDUgNTk3LDg2ICAgIj48L3BvbHlnb24+PHBhdGggZD0iTTU4Ni4xNjcsMTAySDU4OGg2di0yLjg1N2MtMS45OTctMi43NzYtMi45NTQtNi42NTctNC44ODMtNy4wOThMNTg2LjE2NywxMDJ6Ij48L3BhdGg+PHBhdGggZD0iTTU4OC4wNDEsODEuNzE2TDU4Ni43NzEsODZINTczdjE5aDguMTQzbC0xLjEwMiwzLjcxNmwxLjkxOCwwLjU2OGw4LTI3TDU4OC4wNDEsODEuNzE2eiBNNTgzLjMxLDk3LjY4MiAgICBjLTAuNjY4LTAuODYxLTEuMzQtMS4zOTYtMi4wNi0xLjM5NmMtMS45NTUsMC0yLjY3NCw0LjE1Ny01LjI1LDQuOTk5VjEwMmgyLjI1aDMuNzgxbC0wLjI5NiwxSDU3NVY4OGgxMS4xOEw1ODMuMzEsOTcuNjgyeiI+PC9wYXRoPjwvZz48L2c+PC9zdmc+");
background-size: contain;
}
.outerImage .external { /* 只要JS */
background-image: none;
padding-right: 0;
}
.outerImage img {
width: 100%;
height: 100%;
}
.badImage img {
display: none;
}
/*