LLWiki正在建设中,欢迎加入我们!
“Widget:OuterImage”的版本间差异
跳转到导航
跳转到搜索
(//使用页面/文本对比查看器快速编辑) |
(//使用页面/文本对比查看器快速编辑) |
||
(未显示同一用户的10个中间版本) | |||
第1行: | 第1行: | ||
<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='/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 { /* 外层容器,防窄屏上图片过宽 */ |
||
overflow-x: auto; |
overflow-x: auto; |
||
max-width: 100%; |
|||
vertical-align: bottom; /* Safari */ |
|||
} |
} |
||
.outerImage > div { |
.outerImage > div { /* 内层容器,可以裁剪 */ |
||
overflow: hidden; |
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; |
|||
} |
|||
⚫ | |||
background-image: none; |
background-image: none; |
||
padding-right: 0; |
padding-right: 0; |
||
第14行: | 第31行: | ||
width: 100%; |
width: 100%; |
||
height: 100%; |
height: 100%; |
||
} |
|||
.badImage img { |
|||
display: none; |
|||
} |
} |
||
/* </pre><includeonly> */ |
/* </pre><includeonly> */ |
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;
}
/*