작은 화면의 이미지 크기 조정

이미지를 사용자 화면 크기로 조정할 수있는 방법이 있습니까? (HTML/CSS)작은 화면의 이미지 크기 조정

나는 미디어 쿼리를 시도했지만, 내가 믿는 텍스트를 제외하고는 매우 유용하다고 입증되지 않았습니다.

@media screen and (min-width:600px) { 
#dick{ 
    color: black; 
    z-index: 400; 
    position:absolute; 
    left: 58%; 
    top: 210px; 
    height: 50%; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size:100%; 
} 
}

출처

2014-12-03 M and D

간단히 작동시킬 수있는 너비만큼 스팬을 만듭니다.

img { 
    width: 100%; 
}

출처

2014-12-03 18:41:05

당신은 인식 할 수없는 천재이지만 결함이 있지만 직접 코드를 작성할 수 있습니다. 어떤 방식 으로든 텍스트 크기를 사용자 화면 크기로 변경할 수 있습니까? –

감사합니다. 다른 사람이 다른 대답을 검토 할 필요가 없도록 정답으로 표시해야합니다. 'font-size'에 관해서는, 나는 그것을 달성하기 위해 "content first"접근 방식으로'em'을 사용합니다. 여기서 깊이 들어갈 수는 없지만, 다른 질문을 게시하여 다른 스레드를 시작해야합니다. –

당신은 크기 조정-IMG 같은 클래스를 정의하고 IMG 태그에이 클래스를 추가 할 수 있습니다

<img class="resize-img">

다음 스타일 시트 : 이미지 요소에 대한

@media screen and (min-width:600px) { 

    .resize-img{ 

     width: 100px; 
     height:200px; 
     // and whatever else :d 

    } 

} 


    @media screen and (min-width:1000px) { 

    .resize-img{ 

     width: 300px; 
     height:600px; 
     // and whatever else :d 

    } 

}

출처

2014-12-03 18:45:32 Milad

anwser에 감사드립니다! –

문제가 해결 되었습니까? – Milad

id.ot은 대답을 제공합니다. 배경 이미지의 경우, 당신은이를 사용할 수 있습니다

html, body, .column { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body { 
 
    background: url('http://placehold.it/300x300') no-repeat 0px 0px/100vw; 
 
    font-size: 10vh; 
 
} 
 
h2 { 
 
    font-size: 2em; 
 
}

<h1>This is the header</h1> 
 
<p>and some paragraph text</p>

시도를 "전체 페이지"보기 모드를 사용할 때 창 크기를 조정하고 이미지의 크기를 조정하는 방법을 볼 수 있습니다. 당신이 왜곡에 대해 걱정하지 않는 경우, 당신도 그렇고

background: url('http://placehold.it/300x300') no-repeat 0px 0px/100vw 100vh;

, vw을 사용할 수 있으며 vh 단위는 (id.ot의 대답에 귀하의 코멘트에 대한) 텍스트의 크기를 조정하는 데 사용할 수 있습니다.

출처

2014-12-03 18:46:33 Paul

감사합니다. –

작은 화면의 이미지 크기 조정

답변

관련 문제