徽章大小：GOOGLE PLAY STORE和APPLE APP STORE保证金：增加APPLE徽章上的保证金以符合规模 [英] badge size: GOOGLE PLAY STORE and APPLE APP STORE margin: increase margin on APPLE badge to match size

问题描述

这个问题与这一个有关。

其中一条评论建议在APP STORE BADGE图片周围添加保证金，以匹配默认包含保证金的GOOGLE PLAY STORE BADGE。

尝试了一段时间来操纵GOOGLE PLAY STORE BADGE来裁剪边距（就像这个例子中的）。哪种工作，但不可能裁剪图像的右边缘。

因此，添加一个 margin-top ， margin-bottom ， margin-right ， margin-left 以APP STORE BADGE大小的百分比显示更可靠。

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

  .margin-apple-badge {
保证金：X％
} 
  

解决方案

适用于APPLE APP STORE徽章的正确值为 style =margin ：6％; width：88％。

在 img 必须是：

  img {
最大宽度：100％; 
 height：auto; 
 
  

然后在< div> 宽度值是相同的（每个徽章的< img> 例如以下），徽章APPLE APP STORE和GOOGLE PLAY STORE将具有相同的尺寸宽高比。

 < div class =  > 
< div class =style =width：300px> 
< img src =/ Download_on_the_App_Store_Badge_FR_135x40.svgstyle =margin：6％; width：88％>< / img> 
< / div> 
< div class =style =width：300px> 
< img src =/ google-play-badge.png> / img> 
< / div> 
< / div> 
  

This question is linked to this one.

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 in example as this one). 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>

这篇关于徽章大小：GOOGLE PLAY STORE和APPLE APP STORE保证金：增加APPLE徽章上的保证金以符合规模的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！