브라우저 이미지 100%로 할 때 흐린 현상

Question

웹브라우저에서 이런경우 이미지가 흐려보이더라구요

이미지가 바깥 영역보다 클 경우 100%로 채울 경우 흐 려보이는 경우입니다

구글 검색해보니 픽셀매칭이 안되어서 그런거 같다고 본거 같은데

해결방법 좀 알려주세요

이미지 선명함

<div style="position:relative;">

<div><img src="이미지주소"></div>

</div>

이미지가 흐려져요

<div style="position:relative;">

<div><img src="이미지주소" style="width:100%;"></div>

</div>

Answer 1

웹브라우저에서 이런경우 이미지가 흐려보이더라구요

이미지가 바깥 영역보다 클 경우 100%로 채울 경우 흐 려보이는 경우입니다

구글 검색해보니 픽셀매칭이 안되어서 그런거 같다고 본거 같은데

해결방법 좀 알려주세요

===> width=100% 라는건 사진을 100% 픽셀에 맞게 출력하라는게 아니라

현재 화면의 크기를 100% 라고 하면 100% 화면크기로 이미지를 출력하라는것입니다

이걸 해결하기 위해서는 픽셀단위로 지정을 해주세요

예를 들어 가로이미지 크기가 2000px 라면? width=2000px 라고 하시면 되지만,

화면에 이미지가 일부 보이지 않게 됩니다.

근데, 이미지가 전부 보이면서 좀더 쨍하게 보여야 한다면? 그떄 사용되는게 썸네일입니다

즉, 미리 축소된 깔끔한 이미지를 화면사이즈에 축소하여, 상황에 맞게 썸네일이미지들을 보여주시면 됩니다

대부분 다 이런식으로 이미지 처리를 합니다,