응답 성이 뛰어난 여러 이미지에 대한 편지

사용자 프로필 그림이 표시되는 일부 사이트에서는 특정 위치 표시 자 이미지 대신 사용자의 이니셜이 표시됩니다.응답 성이 뛰어난 여러 이미지에 대한 편지

나는 시도하고 내 사이트 중 하나에서이를 구현하기로 결정했지만 나는 반응을 유지하기 위해 사투를 벌인거야.

어딘가에 백엔드에 저장된 머리 글자의 모든 조합으로 실제 이미지가 부족한 철저한 솔루션이 필요합니다.

이제이 프로필 사진은 화면의 여러 위치에 나타날 수 있으므로 너무 많은 가이드와 같은 절대 위치 지정은 옵션이 아닙니다.

'솔루션'나는 다음과 같은 CSS 클래스 이용 내놓았다 : 나는 사용자가 프로필 이미지를 가지고 있는지 먼저 확인 테스트하고있어이 외에도

.profile-image img.with-initials { 
    position: relative; 
    left: -10px; 
    width: 30px; 
} 

.profile-image .initials { 
    position: relative; 
    bottom: 2px; 
    left: 50%; 
    margin: 0 auto; 
    float: left; 
    z-index: 100; 
} 

.profile-image span.initials { 
    color: #efefef; 
    font-weight: 600; 
    font-size: 150%; 
    line-height: 35px; 
    letter-spacing: 1px; 
}

을 나는 이러한 클래스를 추가하지 않을 경우 계산 된 머리 글자로 빈 자리 표시 자 이미지로 이동합니다.

이 모든 것이 특정 화면 크기에 적합하지만 불행히도 크기 조정을 시작하면 불편을 겪습니다. 이 같은

jsfiddle

출처

2017-01-04 Luke Vincent

뷰포트 단위로 글꼴 및 이미지 크기를 조정 해 보았습니까? HTML이나 데모를 게시 할 수 있다면 좋을 것입니다. – sol

http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container 뷰포트가 'js'솔루션이어야하는 컨테이너 너비를 기반으로하는 응답 글꼴 크기이며, fittext.js와 같은 것을 시도해보십시오. – haxxxton

뭔가하지만 이미지를 사용하여 오프 아마 더 좋을 것 같아, 작동합니다 :

HTML :

<div class="profile"> 
    <div class="profile__circle"> 
    <span class="profile__letters">AN</span> 
    </div> 
</div>

CSS :

.profile { 
    width: 10vw; 
    height: 10vw; 
    font-size: 5vw; 

    &__circle { 
    background-color: red; 
    border-radius: 100%; 
    width: 100%; 
    height: 100%; 
    position:relative; 
    } 

    &__letters { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: #fff; 
    } 
}

데모 : https://jsfiddle.net/zy9bgyuz/5/

출처

2017-01-04 13:31:37

응답 성이 뛰어난 여러 이미지에 대한 편지

답변

관련 문제