• Q&A
  • 회원가입
  • 로그인

[responsive] CSS - RES Image - (반응형 이미지)

반응형 image 예제1 - 특정너비를 최대너비로 설정

 

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

img {

  width: 100%;

  height: auto;

  max-width:700px;

  display:block;

  margin:0 auto;

}

</style>

</head>

<body>

<img src="https://source.unsplash.com/random">

<p>홈짱닷컴 Homzzang.com - 홈페이지제작관리 + 서버관리</p>

</body>

</html>


결과보기

※ max-width 없는 경우, 이미지 가로 길이가 부모너비 100% 차지.

 

 

반응형 image 예제2 - 해당이미지 너비를 최대너비로 설정

 

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

img {

  max-width: 100%;

  height: auto;

  display:block;

  margin:0 auto;

}

</style>

</head>

<body>

<img src="https://source.unsplash.com/random">

<p>홈짱닷컴 Homzzang.com - 홈페이지제작관리 + 서버관리</p>

</body>

</html>


결과보기


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012