이미지를 브라우저의 조정에 적절하게 적용하려면 어떻게해야합니까?

Question

간단한 질문이 있습니다. 이미지를 뷰포트에 올바르게 응답하게하려면 어떻게해야합니까?

내가 400 픽셀 (400 픽셀) 너비와 높이 이미지를 가지고 있고, 나는 그것이 브라우저의 크기를 조정할 뷰포트의 폭 (90vw)의 90 %가 될 싶습니다, 그래서 여기에 내 현재 코드는 다음과 같습니다

img { 
    width: 400px; 
    height: 400px; 
} 

@media screen and (max-width: 400px) { 
    img { 
    width: 90vw; 
    height: 90vh; 
    } 
} 

그러나 문제는 이미지가 에이 코드를 사용하여을 조정하지 않는다는 것입니다.

width 대신 max-width을 입력하면 높이가 타원형이며 왜곡되지 않은 이미지를 남기지 않으면 서 이미지의 너비 만 조정됩니다.

내 문제는 쉽게 해결할 수 있습니까?

Answer 1

<img>의 CSS에 height과 을 모두 설정하면 왜곡되기 쉽습니다. 그런 일이 발생하지 않게하려면 하나의 측정 기준을 지정하고 다른 측정 기준을 auto으로 설정해야합니다. 이미지 을 고려하면 사실, 400px × 400px에서, 여기에 사용한다 무엇을,이다 : 그것은 here와

#myImg { 
 
    width: 400px; 
 
    height: auto; 
 
} 
 
@media (max-width: 440px) { 
 
    #myImg { 
 
    width: 90vw; 
 
    } 
 
} 
 

 
/* optional, for centering */ 
 
#myImg {  
 
    display: block; 
 
    margin: 0 auto; 
 
}

<img src="http://via.placeholder.com/400x400" id="myImg">

플레이. 참고 400px 장치 너비 제한을 넘을 때 400px에서 360px으로 건너 뛰지 않으므로 440px을 사용했습니다. 물론 원하는 경우 400px을 사용할 수 있습니다.

Answer 2

시도 object fit.

img { 
    width: 400px; 
    height: 400px; 
    object-fit: cover; 
} 

@media screen and (max-width: 400px) { 
    img { 
    width: 90vw; 
    height: 90vh; 
    } 
} 

또는 브라우저 호환성을 향상 시키려면 대신 배경 이미지를 사용할 수도 있습니다.

Answer 3

두 개의 @media 개의 검색어를 설정해야합니다. 하나는 가로로 조정하고 다른 하나는 세로로 설정하는 것이고, 둘 다 400px으로 설정됩니다. 이은을 downvoted 이유

이

html, body {width:100%;margin:0} 
 

 
img { 
 
    display: block; /* to remove the bottom margin/white-space */ 
 
} 
 

 
@media screen and (max-width: 400px) { 
 
    img { 
 
    width: 90%; 
 
    } 
 
} 
 

 
@media screen and (max-height: 400px) { 
 
    img { 
 
    height: 90vh; 
 
    } 
 
}

<img src="http://lorempixel.com/400/400" alt="">