Question

我绝不是一名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>

Answer 1

使用：

  .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% keyCode无论如何都能让它完全适合。它可能会使某些设备上的图像偏斜，但你不担心移动使用，你应该没问题。

CSS图像剪辑为全屏

1 个答案: