웹에서 Responsive Image(반응형 이미지) 구현하기
반응형 이미지는 어떻게 구현할까? 웹에서 고정된 크기를 가진 이미지를 데스크탑, 랩탑, 태블릿, 스마트폰 등 다양한 기기마다 최적화된 형태로 출력하려면 어떻게 해야할까? 해답은 간단하다. 반응형으로 출력하고 싶은 이미지의 img 엘러먼트에 style 애트리뷰트를 아래와 같이 부여하면 된다. HTML에서는 아래와 같이 부여한다. CSS에서는 아래와 같이 부여한다. img { max-width: 100%; height: auto; } JavaScript에서는 아래와 같이 부여한다. var img = document.getElementsByTagName("img"); vat i=0; while (i < img.length) { img[i].setAttribute("style", "max-width: 100%;..
SW 개발/웹
2014. 4. 8. 20:20
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- kotlin
- 평속
- jstl
- 로드바이크
- JavaScript
- chrome
- Spring MVC 3
- jpa
- Kendo UI
- 로드 바이크
- node.js
- bootstrap
- Kendo UI Web Grid
- Tomcat
- spring
- maven
- 구동계
- 태그를 입력해 주세요.
- Docker
- 자전거
- java
- Eclipse
- jsp
- 알뜰폰
- CentOS
- JHipster
- Spring Boot
- graylog
- DynamoDB
- MySQL
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |
글 보관함