CSS 반응 이미지 요소

안녕하세요. 반응 형 이메일 템플릿을 만들려고합니다.CSS 반응 이미지 요소

배경 이미지를 반응 적으로 만들 수 없습니다.

a#logo { 
    display: block; 
    background-size: 100% 100%; 
    width: 171px; 
    height: 119px; 
    background: url('http://tophitechgadgets.com/wp-content/uploads/2013/11/logo3.png')no-repeat; 
    margin: 14px auto; 
}

이 또한 내가 완벽 반응 사이트를 보이게하기 위해 몇 가지 아이디어를 물어보고 싶은 : 여기

는 이미지 코드의 샘플입니다.

DEMO : http://jsfiddle.net/nLxjU/2/

감사합니다 이것

출처

2013-11-20 Anonymous

'반응 형'에 대한 기대치를 명확히 할 수 있습니까? 나는 당신이 http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/을 읽는 것이 좋습니다. 질문이 너무 광범위합니다. – SW4

나는 배경 이미지를 의미합니다. 내 jsfiddle 코드에 몇 가지 배경 이미지가 있고 어떻게 반응시키는 지 알고 싶습니다. 거기에 코드를 확인하고 이미지가 반응성 유체가 아닌 이유가 무엇인지 확인하십시오. 내 # 로고, .divider, # learn-more 등을 포함합니다. –

만약 이것이 무엇을 의미한다면 : http://jsfiddle.net/nLxjU/3/? – Danield

배경 이미지를 사용하는 곳마다 확인 요소의 width입니다 100%하지 600px 제대로 이미지의 위치를 background-position: center center를 사용합니다. 이런 식으로 대부분의 이미지를 고칠 수있었습니다.

http://jsfiddle.net/myajouri/nLxjU/5/

출처

2013-11-20 12:04:57 myajouri

는 배경 -> 위치와 약간의 오류를 발견 : 중심 센터; 그러나 "a.btn"에 대한 마지막 질문이 하나 있습니다 (쿠폰에 대한 우리 사이트 확인에서 아래쪽에있는 자세히 버튼을 배우십시오) 왜 마진을 추가하더라도 이동하지 않는 이유는 무엇입니까 ?? 너 괜찮 니? –

여백이 줄어들어 움직이지 않습니다. 'display : inline-block'을 추가하면 문제를 해결할 수 있습니다. – myajouri

보기 : 불가능하지 않을 경우 http://www.campaignmonitor.com/blog/post/3107/css3-support-in-email-clients/

당신은 당신이 달성하려고하는 것을 볼 수가 어렵다. 백그라운드 크기는 이메일 클라이언트가 널리 지원하지 않는 css3입니다. 아마도 다르게해야 할 것입니다.

출처

2013-11-20 11:48:09 matpol

내가 틀릴 수도 있지만? – matpol

JS 바이올린에서 코드를 확인할 수있는 방법이 있습니까? 이미지를 반응 적으로 만드시겠습니까? 그래서 내가 무엇이 잘못되었는지 확인할 수 있습니까? DEMO : http://jsfiddle.net/nLxjU/2/ –

일반적으로 반응 형 사이트를 어떻게 테스트합니까? 그것은 똑같은 원칙과 이메일입니다. 웹 브라우저를 사용하십시오. – matpol

많은 전자 메일 클라이언트는 css3을 지원하지 않으므로 배경 크기를 사용할 수 없으므로 왜 이미지를 추가하지 않으시겠습니까? 그 위에 요소가 필요한 경우 절대 위치를 지정하십시오.

출처

2013-11-20 11:52:18 Rickstar

그래,하지만 제 문제는 이미지가 반응하는 것입니다. JS 바이올린에서 코드를 확인할 수있는 방법이 있습니까? 이미지를 반응 적으로 만드시겠습니까? 그래서 내가 무엇이 잘못되었는지 확인할 수 있습니까? DEMO : jsfiddle.net/nLxjU/2 –

당신은 당신이 현재 배경/배경 이미지 속성에 설정 한 모든 요소를 제거해야하고, 대신 100%과로 설정해야 너비있는 <img> 요소와 각 요소를 교체 이미지가 참조 용으로 사용할 수있는 정의 된 너비가 포함 된 요소 내에 배치됩니다.이 컨테이너의 너비는 %이어야합니다.

그런데도 '반응성'에 대한 기대치가 무엇인지 명확히하지 않았기 때문에 위의 내용은 간단한 너비 % 크기 조정에서 작동합니다. 크기를 조정할 때 스태킹이나 오버플로가 필요하면이 작업은 다르고 더 많은 작업이 필요할 수 있습니다. 수신자 이메일 클라이언트에서 지원되지 않을 수 있습니다. 다시 말하자면, 모양은 this article입니다. 언제 까지나 HTML 이메일에 관해서, 제 조언은 간단하게 유지하고 작동하는 것에 충실하는 것입니다. 예 : 가능한 한 단순한 DOM으로 이미지를 포함하는 고정 된 템플릿 (kb 현명함) - 이렇게하면 디자인의 끔찍한 시나리오를 방지 할 수 있습니다.

nb. 바이올린에 제공된 코드의 양을 감안할 때 질문을 해독 할 수도 있습니다. 그럴 가능성이 적은 사람이 전체 템플릿을 리팩터링하여 두려워합니다.

출처

2013-11-20 12:08:26 SW4

CSS 반응 이미지 요소

답변

관련 문제