CSS圖像裁剪為全屏
[英]CSS Image Clipping as Full Screen
問題描述
我絕不是CSS專家（從代碼中可以看到），但是我幾乎可以按照我想要的方式來工作，但是我在格式化方面有一些小問題。 基本上，我正在嘗試制作一個頁面，該頁面將通過ppt面板（導出為.jpgs）。 它非常簡單，只有2個按鈕可轉到下一張或上一張幻燈片並全屏顯示圖像。
我看到的問題是圖像不斷被裁剪，尤其是頂部。 它通常可以正常顯示，但是當我切換圖像時，無論我用多少填充物，屏幕的前5％都會被裁剪。 希望這是一個簡單的解決方案...任何幫助將不勝感激...
<html> <head> <style> body, html { height: 100%; } .bg { /* The image used */ background-image: url("Slide1.JPG"); /* Full height */ height: 90%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; } .center { position: relative; vertical-align: middle; top: 100%; } .button { background-color: #0033ff; /* Blue */ border: solid; border-width: medium; border-color: black; color: white; padding: 2px 2px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; vertical-align: text-top; height: 5%; width: 40%; font-size: 100%; } </style> <script src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> var refreshIntervalId = setInterval(autoNextSlide, 8000); var clicks = 1; var isPaused = false; var time = 0; function pictureBack() { clicks -= 1; checkImage("Slide" + clicks + ".JPG", function () { }, function () { clicks = 1; }); // alert("slides/Slide" + clicks + ".JPG"); var str_image = 'background-image: url("Slide' + clicks + '.JPG");'; document.getElementById('bkground').style.cssText = str_image isPaused = true; time = 0; } function pictureNext() { clicks += 1; checkImage("Slide" + clicks + ".JPG", function () { }, function () { clicks = 1; }); //alert("slides/Slide" + clicks + ".JPG"); var str_image = 'background-image: url("Slide' + clicks + '.JPG");'; document.getElementById('bkground').style.cssText = str_image isPaused = true; time = 0; } function checkImage(imageSrc, good, bad) { var img = new Image(); img.onload = good; img.onerror = bad; img.src = imageSrc; } function autoNextSlide() { if (isPaused) { time++; if (time > 4) { isPaused = false }; //isPaused = true //alert("is paused") } else { pictureNext(); time = 0; isPaused = false; }; } </script> </head> <body> <div class="bg" id="bkground"> <div class="center"> <p><input type="button" class="button" id="theButton" value="Previous" onclick="pictureBack()" style='float:left;' padding="10%"></p> <p><input type="button" class="button" id="theButton2" value="Next" onclick="pictureNext()" style='float:right;'></p> </div> </div> </body> </html>
1 個解決方案
解決方案1
0 已采納 2018-01-22 17:39:06
采用：
.bg { /* The image used */ background-image: url("Slide1.JPG"); /* Full height */ height: 90%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: 100% 100%; }
代替：
.bg { /* The image used */ background-image: url("Slide1.JPG"); /* Full height */ height: 90%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; }
覆蓋使圖像覆蓋其整體中的元素，但會切斷圖像。 100% 100%使它完全適合任何情況。 在某些設備上，它可能會使圖像有些偏斜，但是您不必擔心移動設備的使用，應該沒問題。
絕對定位容器中的 HTML / CSS 視差圖像？ （圖像被剪裁到屏幕的一半）
[英]HTML / CSS Parallax Image in absolute-positioned container? (Image is clipping to half of screen)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.