[HTML/CSS]11.Img CSS 와 icon

Mar 10, 2025

1.contain


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .img-box {
        width: 300px;
        height: 300px;
        border: 1px solid black;
      }

      .img-item {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    </style>
  </head>
  <body>
    <div class="img-box">
      <img src="Screenshot_122.png" class="img-item" />
    </div>
  </body>
</html>

2.cover


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .img-box {
        width: 300px;
        height: 300px;
        border: 1px solid black;
      }

      .img-item {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div class="img-box">
      <img src="Screenshot_122.png" class="img-item" />
    </div>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      * {
        box-sizing: border-box;
      }

      .img-box {
        margin-bottom: 5px;
        padding: 10px;
        width: 300px;
        height: 300px;
        border: 1px solid black;
      }

      .img-item {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>

  <body>
      <div class="img-box">
        <img src="Screenshot_122.png" class="img-item" />
      </div>
      <div class="img-box">
        <img src="Screenshot_122.png" class="img-item" />
      </div>
    </div>
  </body>
</html>

See more posts

[HTML/CSS]11.Img CSS 와 icon

More articles

[HTML/CSS]13. Card 박스 만들기

[HTML/CSS]12. Gridlayout 실습

[HTML/CSS]10. CSS Position

[HTML/CSS]9. Input 디자인