Html 如何根据CSS转换的百分比计算像素？_Html_Css_Image_Pixel_Percentage

Html 如何根据CSS转换的百分比计算像素？

html css image

Html 如何根据CSS转换的百分比计算像素？,html,css,image,pixel,percentage,Html,Css,Image,Pixel,Percentage,为什么我们有一个代码，在这个代码中，我们通过给出边界半径：50%来环绕图像，但是我的老师问我使用像素而不是百分比。我的问题是，如何使用像素单位而不是百分比单位对图像进行取整 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt

为什么我们有一个代码，在这个代码中，我们通过给出

边界半径：50%

来环绕图像，但是我的老师问我使用像素而不是百分比。我的问题是，如何使用像素单位而不是百分比单位对图像进行取整

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice</title>
    <style>
    .logo img{
        width:60px;
        height:60px;
        border-radius:50%;    
        margin-left:5%;
    }
    </style>   
</head>

<body>

 <div class="logo">
    <img src="Images/icon.png" />
 </div>

</body>
</html>


实践
.logo img{
宽度：60px；
高度：60px；
边界半径：50%；
左缘：5%；
}

由于元素为

60px 60px

，

边界半径：50%

相当于

边界半径：30px/30px

（两侧的50%）

大概是这样的：

.logo{
背景色：红色；
宽度：60px；
高度：60px；
边界半径：30px/30px；
}

边界半径：30px；只有当宽度和高度相同时，才会出现这种情况，但如果它们不同，我们就需要这样。所以它是一种广义的。