이미지 중간 표시

cute dog photo on Unsplash을 찾아서 히어로 이미지로 사용하고 있습니다. 높이보다 길기 때문에 높이를 제한하고 싶습니다. 그때를 제외하고는 이미지의 상단만 보여줍니다. 그렇다면 가운데를 어떻게 보여줄까요?

설정

영웅 이미지를 설정하는 방법은 다음과 같습니다.

HTML:

<div class="hero">
  <img src="https://images.unsplash.com/photo-1658786335136-0b3e83dcb63a" alt="cute dog">  
</div>

CSS:

.hero {
  max-height: 100vh;
  overflow: hidden;
}

img {
  max-width: 100%;
}

영웅 div 안에 이미지가 있습니다.

.hero div의 경우 최대 높이를 뷰포트 높이의 100%로 설정합니다. 영웅 섹션에 있을 가능성이 높기 때문입니다.

div의 높이를 설정하면 이미지가 밖으로 흘러나옵니다. overflow: hidden;는 이를 중지하고 이미지를 잘라내어 상단만 표시되도록 합니다.

이미지에서 max-width: 100%;는 크든 작든 항상 브라우저 창의 너비를 채운다는 의미입니다.

이 이미지를 수정하여 중간에 귀여운 강아지를 표시하는 두 가지 방법이 있습니다.

옵션 1: 포지셔닝

이미지는 모두 거기에 있고 아래쪽 부분만 잘립니다. 이미지를 이동하여 잘리는 비트를 변경할 수 있습니다. 우리는 그것의 중심을 보여주고 싶기 때문에 다음과 같이 할 수 있다는 것을 알고 있습니다.

img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

작동하지 않는 것을 제외하고. 그것은 부모의 키를 모르기 때문입니다. 높이가 아닌 최대 높이로 설정했습니다. 이는 top: 50%;로 무엇을 해야 할지 알 수 없음을 의미합니다. CSS가 "그러나 무엇의 50%?"라고 묻는 것을 보고

해결책은 hero div에 명시적인 높이를 추가하는 것입니다.

.hero {
  height: 100vh;
}

이 이미지로는 어느 것이 좋습니다. 하지만 정말 넓고 짧은 이미지가 있다면 어떨까요? 그러면 늘어납니다. 높이가 100%라고 말할 수는 없습니다. 이것이 100%인지 아직 모르기 때문입니다.

해결책은 주인공과 마찬가지로 HTML과 본문이 100%라고 말하는 것입니다.

html,
body,
.hero {
  height: 100%;
}

이제 세 요소 모두의 높이가 페이지의 100%라는 것을 알게 되었습니다. 그러나 .hero에는 최대 높이가 있으므로 높이가 최대 높이보다 크면 최대 높이로 이동합니다.

이 솔루션의 모든 CSS 코드는 다음과 같습니다.

.hero {
  max-height: 100vh;
  overflow: hidden;
}

img {
  max-width: 100%;
}

/* Show the centre of the image using positioning */
html,
body,
.hero {
  height: 100%;
}

img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

옵션 2

이 옵션에는 우리의 오랜 친구인 flexbox가 포함됩니다.

.hero {
  display: flex;
  align-items: center;
}

그리고 우리는 귀여운 강아지를 보고 있습니다.

영웅 섹션에도 텍스트가 있는 경우 상황이 복잡해집니다. 그러나 이렇게 하면 이미지 위에 있을 가능성이 높으므로 이미지나 텍스트는 어쨌든 절대적으로 배치해야 합니다.

귀여운 강아지

계속 귀엽다고 말하는 거 알아요. 여기 코드와 함께 있으니 가지고 놀 수 있습니다.



너무 더워서 아무것도 할 수 없었기 때문에 잠시 사라졌습니다. 바라건대 이제 최악의 여름이 끝났습니다.