그래서 나는 그것을 위해 사업부를 설정 한 이미지 슬라이드 쇼를 가지고 가정되는 웹 사이트를 구축하고있어 서로 다른 화면 해상도

Question

와 일관된 이미지 크기를 유지하기 위해 시도 CSS : 나는 그것이 다른 화면에 다르게 표시하지 않도록 사업부에 맞게 적절한 이미지 크기를 찾기 위해 노력했습니다

#slideshow { 
    position: absolute; 
    height: 28%; 
    width: 99.9%; 
    top: 10.5%; 
    margin: 0; 
} 

. 이 height: 100% 및

width: 100%를 사용하여 DIV에 "축소"할 수 있도록 나는, 불필요하게 큰 이미지를 찾는 시도했다 그러나 그것은 항상 내가 일반적으로 너무 뻗어 테스트 두 화면에 일관성이 변합니다. 한 화면의 해상도는 1336x768이고 다른 화면의 해상도는 1920x1080입니다. 이미지가 다른 화면에서 비율이 변경되지 않도록하려면 어떻게해야합니까? (나는 배너를 생각하며 늘리지 않고 모든 화면에서 항상 일관성을 유지하는 방법을 생각합니다.)

Answer 1

일반적으로 여러 화면 해상도에서 작동하는 모든 종류의 반응 형 디자인을 사용하는 경우 다음을 사용합니다.

img { 
    height: auto; 
    max-width: 100%; 
} 

이렇게하면 이미지의 가로 세로 비율이 올바로 유지됩니다.