Re: [問題] 怎用 CSS 將 imgur 的框隨圖變換與讓圖對齊框左上角

看板Web_Design作者DarkKnightX (Why so serious?)時間8年前 (2017/04/09 19:02)推噓1(1推 0噓 0→)

留言1則, 1人參與討論串3/3 (看更多)

※ 引述《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://www.ptt.cc/bbs/*.html // @include https://www.ptt.cc/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://www.ptt.cc/bbs/Web_Design/M.1491735722.A.8C1.html