Html,Css,JavaScript
Html 이미지 클릭 시 원본 크기 보기
Feb. 6, 2022, 11:26 p.m.
블로그에서 포스팅을 할 때 이미지를 올리는 경우가 많습니다. 그런데 만약 이미지를 원본 크기로 보여지게 한다면? 사진 크기별로 보이는 모습이 제각각이거나 너무 커서 글을 가리는등 여러가지 문제가 생기게 됩니다.
그렇기 때문에 보통 이미지를 일정 크기로 줄여서 보이게 하는데요.. 그런데 만약 그 사진을 더 크게 보고싶다면 어떻게 해야 할 까요?
네이버 블로그 같은 경우 이미지를 클릭하면 팝업창으로 더 크게 보여줍니다. 그런데 그럴 필요없이 아주 간단한 코드로 이미지를 클릭했을 때 새 창을 열어 원본이미지를 볼 수 있도록 해보겠습니다.
아주 간단합니다. 이미지 속성에 onclick="window.open(this.src)" 를 추가해주기만 하면 되는데요,
예시를 보겠습니다.
<img src ="/media/markdownx/2022/02/06/c3ca6ee2-2531-4664-8aea-893e65e23130.png" style="display:block; width:100%;" class="mx-auto" onclick="window.open(this.src)">
현재 이 이미지는 width:100%; 속성에 의해 상위 div의 넓이에 맞게 표시되고 있습니다. 원본 크기보다 줄여지게 되죠. 이때 이 이미지를 클릭하게 되면 새 창으로 원본 이미지를 볼 수 있게 되는 것입니다.
이것이 적용된 실제 제 블로그에 있는 사진입니다.
클릭해보시면 새 창이 열리는 모습을 볼 수 있습니다!
Html JavaScript
Log in and leave a comment
Html,Css,JavaScript 의 다른 글 보기