고객은 큰 화면보다 작은 화면에서 다른 배너 이미지를 사용하려고합니다. 크기를 줄이거 나 늘리지 않고 실제로는 다른 이미지로 대체하십시오. 풀 사이즈 이미지는 매우 복잡합니다. 몇 명, 두 개의 로고, 장식용 텍스트 등입니다. 작은 이미지의 경우 일부 사람들을 잘라내고 로고 등을 떨어 뜨리고 싶습니다. 데스크탑을위한 가장 복잡한 이미지, 중간 크기의 장치를위한보다 단순한 이미지, 그리고 가장 작고 단순한 이미지를 제공합니다.반응 형 디자인 : 다양한 화면 크기에 대한 서로 다른 이미지
가장 좋은 방법은 무엇입니까?
첫 번째 생각은 세 이미지를 모두 포함하고 @media 최소/최대 너비를 사용하여 주어진 크기에서 둘을 보이지 않게 만드는 것입니다. Like :
@media (max-width: 400px) { .smallimg {display: block} .midimg {display: none} .bigimg {display: none} }
@media (min-width: 401px) and (max-width: 700px) { .smallimg {display: none} .midimg {display: block} .bigimg {display: none} }
@media (min-width: 701px) { .smallimg {display: none} .midimg {display: none} .bigimg {display: block} }
이 작업은 정상적으로 작동하지만 매번 세 개의 이미지를 모두 다운로드하므로 대역폭이 낭비되는 것 같습니다.
이미지를 img 태그에서 CSS 배경 이미지로 변경할 수 있습니다. 그게 더 나아질까요? 세 가지 모두를 다운로드하지 않겠습니까? 아니면 여전히 그렇게할까요?
나는 화면 크기에 따라 img 태그의 URL을 동적으로 업데이트하기 위해 JavaScript를 작성하려고했지만 복잡성이 많은 것처럼 보입니다.
로고와 텍스트를 각각 별도의 이미지로 만들고 실제 그림을 여러 조각으로 나눈 다음이를 모두 겹치는 이미지로 모으려 고 생각했습니다. 그러나 그것은 올바른 작업이 많이 들린 것처럼 들리지만, 가능한 크기를 모두 똑바로보아야합니다. 단지 축소하거나 늘리기 만하면 쉽지 않습니다. 그리고이 기능은 아마도 가능할 것입니다. 나는 미래에 사용할 수있는 일반적인 솔루션을 선호합니다.
아무도 이런 식으로 끝내지 않았으며 최선의 방법에 대한 아이디어가 있습니까?
왜 테스트하지 않습니까? 일부 이미지를 배경으로 설정하고 숨길 수 있습니다. 그런 다음 숨겨진 div에 대한 요청을 실제로 수행하고 있는지 여부를 브라우저에서 확인할 수 있습니다. –
@FranciscoPresencia 블록이 숨겨져 있으면 배경 이미지를 사용해도 이미지가로드되지 않습니다 (http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading 참조). –
@Jay 작은 이미지가 가장 큰 이미지의 "자르기"인 경우 배너의 배경으로 가장 큰 이미지를 한 번로드하고 여러 이미지를로드하지 못하도록 여러 화면 크기에 배경 크기와 배경 위치를 사용할 수 있습니다. – Arbel