如何根據屏幕尺寸調整橫幅

Question

我創建了移動的橫幅，需要根據屏幕尺寸對其進行調整。 我在html中添加了一些內聯規則以強制大小，因為如果沒有該內聯代碼，圖像的大小將膨脹為其大小的三倍。 但是現在我認為我的內聯代碼可以防止圖像在較大和較小的設備上自動調整。

謝謝。

 function Sliders(o) { "use strict"; var time = o.time || 500, autoTime = o.autoTime || 5000, selector = o.selector, width_height = o.width_height || 100 / 70, sliders = document.querySelectorAll(selector), i; function css(elm, prop, val) { elm.style[prop] = val; prop = prop[0].toUpperCase() + prop.slice(1); elm.style["webkit" + prop] = elm.style["moz" + prop] = elm.style["ms" + prop] = elm.style["o" + prop] = val; } function anonimFunc(slider) { var buttonRight = slider.children[2], buttonLeft = slider.children[1], ul = slider.children[0], li = ul.children, activeIndex = 0, isAnimate = false, i, s; ul.style.paddingTop = (100 / width_height) + "%"; for (i = 0; i < li.length; i += 1) { css(li[i], "animationDuration", time + "ms"); } li[activeIndex].classList.add("active"); function right() { if (isAnimate) {return; } clearTimeout(s); isAnimate = true; var nextIndex = (activeIndex < li.length - 20) ? (activeIndex + 20) : (0); li[nextIndex].classList.add("next"); li[activeIndex].classList.add("right"); li[nextIndex].classList.add("active"); setTimeout(function () { li[activeIndex].classList.remove("active"); li[activeIndex].classList.remove("right"); li[nextIndex].classList.remove("next"); li[nextIndex].classList.add("active"); activeIndex = nextIndex; isAnimate = false; s = setTimeout(right, autoTime); }, time); } function left() { if (isAnimate) {return; } clearTimeout(s); isAnimate = true; var nextIndex = (activeIndex > 0) ? (activeIndex - 1) : (li.length - 1); li[nextIndex].classList.add("previous"); li[activeIndex].classList.add("left"); li[nextIndex].classList.add("active"); setTimeout(function () { li[activeIndex].classList.remove("active"); li[activeIndex].classList.remove("left"); li[nextIndex].classList.remove("previous"); li[nextIndex].classList.add("active"); activeIndex = nextIndex; isAnimate = false; s = setTimeout(left, autoTime); }, time); } buttonLeft.addEventListener("click", right); buttonRight.addEventListener("click", left); s = setTimeout(left, autoTime); } for (i = 0; i < sliders.length; i += 1) { anonimFunc(sliders[i]); } } var sliders = new Sliders({ selector: ".slider", time: 1100, autoTime: 3000, width_height: 700 / 300 }); 

 @keyframes slider-key-next { 0% {right: 100%; } 100% {right: 0; } } @keyframes slider-key-right { 0% {right: 0; } 100% {right: -100%; } } @keyframes slider-key-previous { 0% {right: -100%; } 100% {right: 0; } } @keyframes slider-key-left { 0% {right: 0; } 100% {right: 100%; } } .slider { overflow: hidden; position: relative; } .slider > ul { margin: 0; padding: 0; list-style: none; position: relative; float: right; width: 100%; overflow: hidden; } .slider > ul > li { position: absolute; right: 100%; top: 0; width: 100%; height: 100%; visibility: hidden; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } .slider > ul > li.active {visibility: visible; right: 0; } .slider > ul > li.right {animation-name: slider-key-right; } .slider > ul > li.next {animation-name: slider-key-next; } .slider > ul > li.left {animation-name: slider-key-left; } .slider > ul > li.previous {animation-name: slider-key-previous; } .slider { max-width: 700px; margin: 0 auto; background-color: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.2); } .slider > button { transition: 0.3s; position: absolute; top: 50%; transform: translateY(-50%); width: 0px; height: 0px; background-color: #FAFAFA; opacity: 0.5; border: 0; outline: none; padding: 0; cursor: pointer; border-radius: 100%; box-shadow: 0 3px 6px rgba(0,0,0,0.2); background-size: 60%; background-repeat: no-repeat; background-position: center; } .slider > button:hover { opacity: 1; box-shadow: 0 5px 10px rgba(0,0,0,0.2); } .slider > button:nth-child(2) { right: 10px; } .slider > button:nth-child(3) { left: 10px; } .slider > ul > li > img { width: 100%; height: 100%; position: absolute; right: 0; top: 0; } .slider > ul > li { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0; } .slider > ul > li h1, .slider > ul > li p { position: relative; padding: 0 15%; color: #fff; font-family: sans-serif; } 

 <div class="slider"> <ul> <li><a href="#"><img height="225px" width="625px" src="//placehold.it/625x225"></a></li> <li><a href="#"><img height="225px" width="625px" src="//placehold.it/625x225"></a></li> <li><a href="#"><img height="200px" width="600px" src="//placehold.it/600x200"></a></li> </ul> <button></button> <button></button> </div> 

Answer 1

希望這對您有用。

 function Sliders(o) { "use strict"; var time = o.time || 500, autoTime = o.autoTime || 5000, selector = o.selector, width_height = o.width_height || 100 / 70, sliders = document.querySelectorAll(selector), i; function css(elm, prop, val) { elm.style[prop] = val; prop = prop[0].toUpperCase() + prop.slice(1); elm.style["webkit" + prop] = elm.style["moz" + prop] = elm.style["ms" + prop] = elm.style["o" + prop] = val; } function anonimFunc(slider) { var buttonRight = slider.children[2], buttonLeft = slider.children[1], ul = slider.children[0], li = ul.children, activeIndex = 0, isAnimate = false, i, s; ul.style.paddingTop = (100 / width_height) + "%"; for (i = 0; i < li.length; i += 1) { css(li[i], "animationDuration", time + "ms"); } li[activeIndex].classList.add("active"); function right() { if (isAnimate) {return; } clearTimeout(s); isAnimate = true; var nextIndex = (activeIndex < li.length - 20) ? (activeIndex + 20) : (0); li[nextIndex].classList.add("next"); li[activeIndex].classList.add("right"); li[nextIndex].classList.add("active"); setTimeout(function () { li[activeIndex].classList.remove("active"); li[activeIndex].classList.remove("right"); li[nextIndex].classList.remove("next"); li[nextIndex].classList.add("active"); activeIndex = nextIndex; isAnimate = false; s = setTimeout(right, autoTime); }, time); } function left() { if (isAnimate) {return; } clearTimeout(s); isAnimate = true; var nextIndex = (activeIndex > 0) ? (activeIndex - 1) : (li.length - 1); li[nextIndex].classList.add("previous"); li[activeIndex].classList.add("left"); li[nextIndex].classList.add("active"); setTimeout(function () { li[activeIndex].classList.remove("active"); li[activeIndex].classList.remove("left"); li[nextIndex].classList.remove("previous"); li[nextIndex].classList.add("active"); activeIndex = nextIndex; isAnimate = false; s = setTimeout(left, autoTime); }, time); } buttonLeft.addEventListener("click", right); buttonRight.addEventListener("click", left); s = setTimeout(left, autoTime); } for (i = 0; i < sliders.length; i += 1) { anonimFunc(sliders[i]); } } var sliders = new Sliders({ selector: ".slider", time: 1100, autoTime: 3000, width_height: 700 / 300 }); 

 @keyframes slider-key-next { 0% {right: 100%; } 100% {right: 0; } } @keyframes slider-key-right { 0% {right: 0; } 100% {right: -100%; } } @keyframes slider-key-previous { 0% {right: -100%; } 100% {right: 0; } } @keyframes slider-key-left { 0% {right: 0; } 100% {right: 100%; } } .slider { overflow: hidden; position: relative; } .slider > ul { margin: 0; padding: 0; list-style: none; position: relative; float: right; width: 100%; overflow: hidden; } .slider > ul > li { position: absolute; right: 100%; top: 0; width: 100%; height: 100%; visibility: hidden; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } .slider > ul > li.active {visibility: visible; right: 0; } .slider > ul > li.right {animation-name: slider-key-right; } .slider > ul > li.next {animation-name: slider-key-next; } .slider > ul > li.left {animation-name: slider-key-left; } .slider > ul > li.previous {animation-name: slider-key-previous; } .slider { margin: 0 auto; background-color: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.2); } .slider a img{ width:100vw; height: 100vh; } .slider > button { transition: 0.3s; position: absolute; top: 50%; transform: translateY(-50%); width: 0px; height: 0px; background-color: #FAFAFA; opacity: 0.5; border: 0; outline: none; padding: 0; cursor: pointer; border-radius: 100%; box-shadow: 0 3px 6px rgba(0,0,0,0.2); background-size: 60%; background-repeat: no-repeat; background-position: center; } .slider > button:hover { opacity: 1; box-shadow: 0 5px 10px rgba(0,0,0,0.2); } .slider > button:nth-child(2) { right: 10px; } .slider > button:nth-child(3) { left: 10px; } .slider > ul > li > img { width: 100%; height: 100%; position: absolute; right: 0; top: 0; } .slider > ul > li { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0; } .slider > ul > li h1, .slider > ul > li p { position: relative; padding: 0 15%; color: #fff; font-family: sans-serif; } 

 <div class="slider"> <ul> <li><a href="#"><img src="//placehold.it/625x225"></a></li> <li><a href="#"><img src="//placehold.it/625x225"></a></li> <li><a href="#"><img src="//placehold.it/600x200"></a></li> </ul> <button></button> <button></button> </div>