作者DarkKnightX (Why so serious?)
看板Web_Design
标题Re: [问题] 怎用 CSS 将 imgur 的框随图变换与让图对齐框左上角
时间Sun Apr 9 19:01:59 2017
※ 引述《cc98 (cc98)》之铭言：
: https://uploadpie.com/A3WKbV
: （consume within: 3 days）
:
: 问题：
: 1. 如何设定单边可等比例缩放 imgur 的图片外框？
: 2. 如何让图在缩小的外框内对齐左上角，并且图片不会被外框挡住？
他多包了一层 iframe, 可以用 CSS 调宽,
但是高不会自动调, 图会被切掉, 或是多下方的白边.
: 目标：
: 外框随图缩放或没外框
拿掉外框的 CSS:
@-moz-document domain("imgur.com") {
body, html {
background: none;
}
body {
max-width: unset;
}
body, #image, #img-tag {
margin: 0;
}
.post {
position: relative;
}
#image {
width: auto !important;
height: auto !important;
}
#app-container,
#under-image {
display: none;
}
}
@-moz-document domain("ptt.cc") {
#main-content iframe.imgur-embed-iframe-pub {
border: none;
margin-bottom: -60px;
}
}
这边上下是真的外框, 左右是 body 的 background.
只用 CSS 可以做到这里. 但是如果用一点 js, 可以直接回到原版:
// ==UserScript==
// @name ptt imgur embed
// @namespace ptt.cc
// @include
https://webptt.com/cn.aspx?n=bbs/*.html
// @include
https://webptt.com/cn.aspx?n=man/*.html
// @run-at document-start
// ==/UserScript==
const h = (tag, props) => Object.assign(document.createElement(tag), props)
const preventScript = test => event =>
test(event.target.src) && event.preventDefault()
const isImgurScript = name => /imgur.com/.test(name)
document.addEventListener('beforescriptexecute', preventScript(isImgurScript))
try { //if no beforescriptexecute
unsafeWindow.imgurEmbed = {createIframe: () => void 8}
} catch(e) {}
document.addEventListener('DOMContentLoaded', main)
const entry = '.imgur-embed-pub'
const imgurURL = node => {
const link = node.parentElement.previousElementSibling
return (link.href || link.querySelector('a').href)
.replace('http:', '
https://')
}
const ensureSuffix = url => /\.(jpe?g|png)$/.test(url)? url: url + '.jpg'
function repaste(node) {
node.parentElement.appendChild(h('img', {
src: ensureSuffix(imgurURL(node)),
referrerPolicy: 'no-referrer'
}))
}
function main() {
Array.from(document.querySelectorAll(entry)).forEach(repaste)
}
请搭配 Tampermonkey(chrome) 或 Greasemonkey(firefox) 使用.
会多包 iframe 的原因是 ptt 的 referrer 被 imgur 挡了, 只好改用
imgur 给的 embed, 结果是多包 iframe + 白框.
但是对策不只这个, 我们也可以让 browser 不送 referrer (
https://goo.gl/VD2Tzj )
上面做的就是把 imgur 的 script 挡掉, 然後放回原本的 <img>
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 219.85.124.151
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1491735722.A.8C1.html
1F：推 cc98: 感谢您！真是太谢谢您了！！按照您的方法，可执行！谢谢阿！ 04/14 21:08