Fatal编程技术网
  • html/
  • Html 图像大小不同

Html 图像大小不同

html css image

Html 图像大小不同,html,css,image,Html,Css,Image,我把棋子（棋子，图像）放在我的“定制”棋盘上，我用了100px的图像，所以我把大小改为50px，并对准中心。当我用白色的棋子做同样的事情时，我注意到黑色的棋子明显比白色的棋子大 代码（HTML）： 图片下载自： -PNG，NoShadow，1x，-->b_典当，w_典当 它的样子：我使用您在下面提供的图像运行了您的代码 JonPablok Cburnett国际象棋套装/PNGs/无阴影/1x 无法重现你的问题。看起来你的源图像开始的尺寸可能不同？如果是这样，其中一个周围可能会有更多的空白。尝试使

我把棋子（棋子，图像）放在我的“定制”棋盘上，我用了100px的图像，所以我把大小改为50px，并对准中心。当我用白色的棋子做同样的事情时，我注意到黑色的棋子明显比白色的棋子大

代码（HTML）：

图片下载自： -PNG，NoShadow，1x，-->b_典当，w_典当

它的样子：

我使用您在下面提供的图像运行了您的代码

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

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

尝试将
td img{width:100%}
添加到CSS中。较大的图像需要能够拉伸/收缩。另外，尝试从
标记中删除
宽度
和
高度
，它们是多余的，由CSS处理…下一步是将
img{display:block}
（默认值为
ìnline block
）添加到CSS中，以删除图像下方不需要的空间…感谢您的帮助，第一个使黑色部分拉伸（与下面的字段相同），第二个没有将任何内容更改为白色部分（图像周围的空格）。请记住第二个，因为我相信你会在某一页或另一页遇到问题。哦，我注意到图像的大小不同。谢谢，我想我可能通过调整它们的大小或表格来拉伸黑色部分。。。

<!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>



table {
    background-color:none;
    }
td {

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