5. 이미지

이미지에 반응형과 스타일을 입히는 방법입니다. 아래 실행 이미지는 가로가 2000px인 이미지입니다. 3버전에서는 img-responsive를 사용했었습니다.


<div class="container">
	<div class="row">
		<div class="col-2">
			<img src="img/temp2000.png" class="img-fluid" alt="img">
		</div>
		<div class="col-2">
			hello
		</div>
		<div class="col-2">
			hello
		</div>
	</div>
</div>

이미지 썸네일입니다. 작은이미지 보다는 큰 이미지에 활용됩니다.


<div class="container">
    <div class="row">
      <div class="col-2">
        <img src="img/temp.png" class="img-thumbnail" alt="img">
      </div>
    <div class="col-2">
      hello
    </div>
    <div class="col-2">
      hello
    </div>
  </div>
</div>

화면에는 보이지 않지만 이미지가 컬럼의 가장 오른쪽에 붙어있습니다. 또한 테두리가 미묘하게 깎여 있는 것을 볼 수 있습니다. 추가로 이미지를 둥그렇게 만드는 class는 rounded-circle입니다. 3 이전의 버전에서는 img-circle을 사용했었습니다.


<div class="container">
      <div class="row">
        <div class="col-6">
          <img src="img/temp.png" class="rounded float-right" alt="img">
        </div>
        <div class="col-2">
          hello
        </div>
        <div class="col-2">
          hello
        </div>
      </div>
    </div>

이제부터는 Code와 Output 위주로 보도록 하겠습니다.


<img src="...", class="img_field" alt="Responsive image">


<img src="..." alt="..." class="img-thubnail">


	<img src="cinqueterre.jpg" class="rounded-circle alt="Cinque Terre">


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .b{
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 b">
                <img class="img-fluid" src="jeju.jpg" alt="">
            </div>
            <div class="col-md-4 b">
                <img class="img-fluid rounded-circle" src="jeju.jpg" alt="">
            </div>
            <div class="col-md-4 b">
                <img class="img-fluid img-thumbnail" src="jeju.jpg" alt="">
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>