배지 크기 : GOOGLE PLAY STORE 및 APPLE APP STORE 여백 : APPLE 배지의 여백을 증가시켜

Question

크기에 맞 춥니 다.이 질문은 this one과 (과) 관련이 있습니다.

덧글 중 하나는 APP STORE BADGE 이미지 주위에 여백을 추가하여 기본적으로 여백을 포함하는 GOOGLE PLAY STORE BADGE와 일치시키는 것을 제안합니다.

GOOGLE PLAY STORE BADGE를 조작하여 여백을 자르기 (like in example as this one) 후 잠시 시도해보십시오. 어떤 작업을하지만 이미지의 오른쪽 여백을 잘라낼 수는 없습니다.

margin-top, margin-bottom, margin-right, margin-left을 APP STORE BADGE의 크기 비율로 더하는 것이 더 신뢰할 수 있습니다.

내 질문은 우리가 CSS 클래스에 사용해야하는 값이다 :

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

Answer 1

오른쪽 값을 애플 앱 스토어 배지에 적용 할 style="margin:6%;width:88%"입니다. img에 CSS 룰

이 여야

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

이어서, 상기 width 값이 동일 (300 픽셀 아래의 예에서) 인 경우, 배지 APPLE APP 매장 각 배지의 <img> 주변 모두 <div> 및 GOOGLE PLAY STORE의 가로 세로 비율은 같습니다.

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