增加 App Store 徽章的边距以匹配 Google Play 商店徽章的大小 [英] Increase margin on App Store badge to match size of Google Play Store badge

问题描述

这个问题与这个问题相关联:新的 Google Play 徽章尺寸不合适

其中一条评论建议在 App Store 徽章图像周围添加边距，以匹配默认包含边距的 Google Play 商店徽章.

在尝试操作 Google Play 商店徽章以裁剪其边距后尝试了一段时间(例如:在 CSS 中裁剪图像).哪种工作，但不能裁剪图像的右边距.

所以添加margin-top、margin-bottom、margin-right、margin-leftApp Store 徽章大小的百分比似乎更可靠.

我的问题是我们应该在 CSS 类中使用哪些值:

.margin-apple-badge {保证金:X%}

解决方案

适用于 APPLE APP STORE 徽章的正确值是 style="margin:6%;width:88%".

img 上的 CSS 规则必须是:

img {最大宽度:100%；高度:自动；}

然后在每个徽章的 周围的

中，如果 width 值相同(300px在下面的示例中)，徽章 APPLE APP STORE 和 GOOGLE PLAY STORE 将具有相同的尺寸纵横比.

<div class="" style="width:300px"><img src="/Download_on_the_App_Store_Badge_FR_135x40.svg" style="margin:6%;width:88%"></img>
<div class="" style="width:300px"><img src="/google-play-badge.png" >/img>

This question is linked to this one: New Google Play badge doesn't get the size right

One of the comment suggests to add a margin around the App Store badge image to match the Google Play Store badge that includes by default a margin.

After trying for a while to manipulate the Google Play Store badge to crop the margin on it (like this: Crop image in CSS). Which kind of work but it is not possible to crop the right margin of the image.

So adding a margin-top, margin-bottom, margin-right, margin-left in percentage of the size of the App Store badge seems more reliable.

My question is which values should we use in a CSS class:

.margin-apple-badge {
  margin: X %
}

解决方案

The right value to apply to the APPLE APP STORE badge is style="margin:6%;width:88%".

In CSS rule on img must be:

img {
    max-width: 100%;
    height: auto;
}

Then in both <div> surrounding the <img> of each badge, if the widthvalues are the same (300px in example below), the badges APPLE APP STORE and GOOGLE PLAY STORE will have the same size aspect ratio.

<div class="">
  <div class="" style="width:300px">
    <img  src="/Download_on_the_App_Store_Badge_FR_135x40.svg"  style="margin:6%;width:88%"></img>
  </div>
  <div class="" style="width:300px">
    <img  src="/google-play-badge.png" >/img>
  </div>
</div>

这篇关于增加 App Store 徽章的边距以匹配 Google Play 商店徽章的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！