모바일 장치에서 html로 이미지를 설정하는 방법

Question

문제는 다음과 같습니다. 다른 스마트 폰의 디스플레이 해상도가 다릅니다.

예 : 840x560, 480x320 또는 800x480

"모든"최신 스마트 폰의 이미지를 디스플레이에 맞추기 위해 메타 태그, CSS 등으로 작성해야하는 것은 무엇입니까?

내 관심사가 명확하게 설명되기를 바랍니다.

Answer 1

IMG {최대 폭 : 100 %;}

는 @media 쿼리를 사용한다 특정 화면 크기를 대상으로 지정하려면

Answer 2

트릭을 할 것입니다. 플러스 background-size: cover;은 이미지를 .block 컨테이너에 맞게 만듭니다.

참조 : https://developer.mozilla.org/en-US/docs/CSS/background-size

@media screen and (max-width: 840px) { 
    .block { 
     display: block; 
     width: 100%; 
     height: 100%; 
     background: url(/path/to/image) no-repeat center center transparent; 
     background-size: cover; 
    } 
}