新的Google Play徽章尺寸不正确 [英] New Google Play badge doesn't get the size right

问题描述

今天，我意识到与在Google Play上获取它徽章的旧链接（

$ b $如果你使用正确的源图像而不包含边框，则使用正确的高度正确地设置它的样式是很简单的：

  body {background：black;} img {border：1px solid white;边界半径：6像素;箱尺寸：边界盒; height：45px;} span {background：＃888;显示：内联块;高度：45像素; vertical-align：top;}  < img src = https://play.google.com/intl/zh_CN/badges/images/generic/en-play-badge.png\">< span> 45px高的参考块< / span>  

Today I realized the old link to the "Get it on Google Play" badge (https://developer.android.com/images/brand/en_generic_rgb_wo_45.png) doesn't work any longer (Android devs, update your websites!) and I checked for the new version here: https://play.google.com/intl/en_us/badges/

I changed my code accordingly to

   . . . src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge-border.png" height="45" />

However, it now doesn't line up with the App Store icon any more. The google icon is now at about 37px whereas the App Store icon is, just like I set it, 45px in height.

It appears like the padding around the white border is "hardcoded" into the picture. Check my attached pic for the dimensions.

Why did Google have to change everything again? Also, why can't it just work like it did before? Do I really need to put it at like 55px height in order to make it appear like something like 45px? That sounds like awful code to me.

Edit: forgot the picture

解决方案

If you use the correct source image without border included it's trivial to style it correctly with correct height:

body {
  background:black;
}
img {
  border:1px solid white;
  border-radius:6px;
  box-sizing:border-box;
  height:45px;
}
span {
  background:#888;
  display:inline-block;
  height:45px;
  vertical-align:top;
}

<img src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png">
<span>Reference block of 45px high</span>

这篇关于新的Google Play徽章尺寸不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！