作者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/m.aspx?n=bbs/*.html
// @include
https://webptt.com/m.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/m.aspx?n=bbs/Web_Design/M.1491735722.A.8C1.html
1F：推 cc98: 感謝您！真是太謝謝您了！！按照您的方法，可執行！謝謝阿！ 04/14 21:08