[CSS] - Image Auto Resize CSS
HTML and CSS 2011. 6. 30. 16:53반응형
<head>
<style>
<style>
/* Image Auto Resize */
.figure {
float: left;
font-size: 10px;
letter-spacing: 0.05em;
line-height: 1.1;
text-align: center;
text-transform: uppercase;
width: 100%;
}
.figure b {
display: block;
font-size: 14px;
font-family: "Book Antiqua", "Palatino Linotype", Georgia, serif;
letter-spacing: 0.1em;
}
.figure img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);;
display: block;
margin: 0 auto 1em;
}
img {
max-width: 100%;
}
.ui-icon-test { background: url(/css/images/icon_rollOut_1.png); width : 2.2em; height : 1.5em; }
/*
.ui-icon {background-image: url(/css/images/icon_rollOver.png); width : 2em; height : 2em; }
.ui-icon-aaa { background-position: -0 10%; }
.ui-icon-bbb { background-position: -36 50%; }
.ui-icon-ccc { background-position: -72px 50%; }
.ui-icon-ddd { background-position: -108px 50%; }
*/
</style>
</head>
사용법 : 해당 위치에 class="figure" 입력
</head>
사용법 : 해당 위치에 class="figure" 입력
반응형
'HTML and CSS' 카테고리의 다른 글
| [CSS] - 게시물 제목 자르기( Style:table-layout:fixed ) (0) | 2011.11.07 |
|---|---|
| [CSS] - CSS 그라데이션 (0) | 2011.09.22 |
| [CSS] - 크로스 브라우징 style="display:block" 대처법 (0) | 2011.09.14 |
| [CSS] - 자동 줄바뀜 CSS (0) | 2011.09.08 |
| [CSS] - 문자열 길이 자르기 (0) | 2011.09.07 |