html - 将多个图像放入单个表格单元格中

问题描述

我在调整图像大小时遇到了一些问题。我有我用 Photoshop 创建的图像。它们都是PNG，并已对其进行裁剪以删除尽可能多的空白，但一张图像向右移动了一点。由于我使用的是表格，因此无法添加填充或边距以将其移动到左侧。我正在使用 object-fit 方法将图像调整到正确的大小并适合表格，但它似乎不适合我想要的方式。下面是我的意思的图像：代码：index.html：
<!DOCTYPE HTML>
<html>
<head>
    <title>[KINGDOMS OF CORELIA]</title>
    <link rel="icon" href="favicon.ico">
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            text-align: center;
            font-family: sans-serif;
        }
        a {
            color: blue;
            text-decoration: none;
        }
        hr {
            width: 50%;
        }
        nav {
            text-align: center;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        .nav {
            float: left;
            margin-top: 5px;
            display: block;
            text-align: center;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover {
            background-color: #111;
        }
        .right {
            float: right;
        }
        button {
            font-family: inherit;
            font-size: 80%;
            padding: .5em 1em;
            color: #444;
            color: rgba(0,0,0,.8);
            border: 1px solid #999;
            border: none transparent;
            background-color: #e6e6e6;
            text-decoration: none;
            border-radius: 2px;
            cursor: pointer;
        }
        button:hover {
            background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
        }
        .fade {
            margin: 50px;
            padding: 50px;
            opacity: 1;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .slideshow {
            margin: 50px auto;
            position: relative;
            width: 700px;
            height: 400px;
            padding: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.4);
        }
        .slideshow > div {
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
        }
        img {
        }
        .guard_armor {
            width: 20%;
            height: 50%;
            object-fit: contain;
        }
        .guard_weapons {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .guard_items {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .archer_armor {
            width: 60%;
            height: 90%;
            object-fit: contain;
        }
        .archer_weapons {
            width: 150%;
            height: 150%;
            object-fit: contain;
        }
        table {
            border-collapse: collapse;
        }
        table, th, td {
            border: 0.5px solid black;
        }
        th {
            text-align: left;
        }
        th, td {
            padding: 15px;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body style="margin: 0;">
    <nav>
        <ul>
            <li><a class="nav" href="#">CORELIA</a></li>
            <li><a class="nav" href="staff.html">Staff</a></li>
            <li><a class="nav" href="endran.net/network.html">Network</a></li>
            <li><a class="nav" href="support.html">Support</a></li>
            <li><a class="right" href="login.html" target="_blank">
                <button type="button">Login</button>
            </a></li>
            <li><a class="right" href="signup.html" target="_blank">
                <button type="button">Sign Up</button>
            </a></li>
        </ul>
    </nav>
    <h1>Welcome to the Kingdoms of Corelia! | play.corelia.online:25568</h1>
    <h2>[KITPVP | FACTIONS]</h2>

    <div class="slideshow">
        <div>
            <img src="images/spawn.jpg">
        </div>
        <div>
            <img src="images/fight.jpg">
        </div>
        <div
            <img src="images/arena.jpg">
        </div>
    </div>
    <br />
    <div style="text-align:center">
        <span class="dot" onclick="currentSlide(1)"></span> 
        <span class="dot" onclick="currentSlide(2)"></span> 
        <span class="dot" onclick="currentSlide(3)"></span> 
    </div>
    <div id="content">
        <div id="history" class="fade">
            <h2>The History of the Kingdoms</h2>
            <hr />
            <p>The Kingdoms of Corelia started with a small towny server called <a href="http://endran.net/" target="_blank">Endran</a>. Xp10d3 (the owner) was (and still is) a Moderator on the server and ended up creating a whitelisted Vanilla server originally called Erath. The server was relatively unsuccessful, and the world files ended up getting corrupted. Xp10d3 decided to create a KitPvP server after making a KitPvP plugin. He added a few more gamemodes before fully releasing Corelia until it is now what it looks like today.</p>
        </div>
        <div id="about" class="fade">
            <h2>About the Kingdoms</h2>
            <hr />
            <p>On the website (it's still a work in progress) you can chat with other people in the chat. All you have to do is signup and than login to chat with other people! Other than that, we don't have much else. Sorry for that.</p>
        </div>
        <div>
            <h2 class="fade">KITS</h2>
            <table style="width:100%">
                <tr>
                    <th>Kit Name</th>
                    <th>Armor</th>
                    <th>Weapons</th>
                    <th>Items</th>
                    <th>Tier</th>
                </tr>
                <tr>
                    <td>Guard</td>
                    <td><img src="images/kits/guard_armor.png" class="guard_armor"></td>
                    <td><img src="images/kits/guard_weapons.png" class="guard_weapons"></td>
                    <td><img src="images/kits/cooked_beef.png" class="guard_items"></td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>Archer</td>
                    <td><img src="images/kits/archer_armor.png" class="archer_armor"></td>
                    <td><img src="images/kits/archer_weapons.png" class="archer_weapons"></td>
                    <td><img src="images/kits/archer_items"></td>
                    <td>1</td>
                </tr>
            </table>
        </div>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        $(window).on("load",function() {
        $(window).scroll(function() {
            var windowBottom = $(this).scrollTop() + $(this).innerHeight();
            $(".fade").each(function() {
            /* Check the location of each desired element */
                var objectBottom = $(this).offset().top + $(this).outerHeight();

                /* If the element is completely within bounds of the window, fade it in */
                if (objectBottom < windowBottom) { //object comes into view (scrolling down)
                    if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
                } else { //object goes out of view (scrolling up)
                    if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
                }
            });
        }).scroll(); //invoke scroll-handler on page-load
        });

        $(".slideshow > div:gt(0)").hide();

        setInterval(function() { 
            $('.slideshow > div:first')
                    .fadeOut(1000)
                    .next()
                    .fadeIn(1000)
                    .end()
                    .appendTo('.slideshow');
        },  3000);
    </script>
</body>
</html>
注意：我故意让底部的图像丢失，因为我还没有添加图像。
标签： htmlcssimageobject-fit
html - 将多个图像放入单个表格单元格中

问题描述

解决方案

推荐阅读
