文章/答案/技术大牛

发布

社区首页 >问答首页 >图像大小不同

问图像大小不同
EN

Stack Overflow用户

提问于 2020-02-23 23:53:10

回答 1查看 39关注 0票数 0

我把棋子(棋子，图像)放在我的“定制”棋盘上，我使用了100px的图像，所以我把大小改为50px，并对齐中心。当我对白卒做同样的事情时，我注意到黑卒比白卒要大得多。

代码(HTML)：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="example.css">
        <title>Chess</title>
    </head>
    <body>
        <table  border="1">
            <tr>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
            </tr>

            <!--Added Black Pawns-->
            <tr>
                <td bgcolor="black"> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
                <td> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
                <td bgcolor="black"> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
                <td> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
                <td bgcolor="black"> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
                <td> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
                <td bgcolor="black"> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
                <td> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
            </tr>
            <!--Added Black pawns-->

            <tr>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
            </tr>
            <tr>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
            </tr>
            <tr>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
            </tr>

            <tr>
                <td> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
                <td bgcolor="black"> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
                <td> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
                <td bgcolor="black"> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
                <td> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
                <td bgcolor="black"> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
                <td> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
                <td bgcolor="black"> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
            </tr>

            <tr >
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
                <td bgcolor="black"></td>
                <td></td>
            </tr>
        </table>

    </body>
</html>

CSS(example.css)：

table {
    background-color:none;
    }
td {

    background-color:none;
    width:50px;
    height:50px;
}

图片下载地址：https://opengameart.org/content/chess-pieces-and-board-squares - PNGs，NoShadow，1x，--> b_pawn，w_pawn

外观：https://pasteboard.co/IW24oTG.png

html

css

image

回答 1

Stack Overflow用户

发布于 2020-02-24 00:53:26

中提供的图像运行了您的代码

JonPablok Cburnett国际象棋集/PNGs/无阴影/1x

无法重现你的问题。看起来你的源图像可能是从不同的大小开始的？如果是这样的话，其中一个可能会有更多的空白。尝试使用未更改的图像。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60364026

复制

相似问题

问图像大小不同
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图像大小不同EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图像大小不同
EN