Plakettengröße: GOOGLE PLAY STORE und APPLE APP STORE Rand: Rand auf APPLE-Plakette vergrößern, um Größe anzupassen

Question

Diese Frage ist verknüpft mit this one.

Einer der Kommentare schlägt vor, einen Rand um das APP STORE BADGE Bild hinzuzufügen, um dem GOOGLE PLAY STORE BADGE zu entsprechen, der standardmäßig einen Rand enthält.

Nachdem Sie eine Weile versucht haben, das GOOGLE PLAY STORE BADGE zu manipulieren, um den Rand darauf zuzuschneiden (like in example as this one). Welche Art von Arbeit, aber es ist nicht möglich, den rechten Rand des Bildes zu beschneiden.

Zugabe So ein margin-top, margin-bottom, margin-right, margin-left in Prozent der Größe des APP STORE BADGE zuverlässiger scheint.

Meine Frage ist, welche Werte wir in einer CSS-Klasse verwenden:

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

Answer 1

den richtigen Wert zu den Apple App Store Abzeichen style="margin:6%;width:88%" ist anzuwenden.

In CSS-Regel auf img sein muss:

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

dann in beide <div> die <img> jedes Abzeichen umgibt, wenn die width Werte gleich sind (300px in Beispiel unten), Badges Apple App Store und GOOGLE PLAY STORE wird das gleiche Seitenverhältnis haben.

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