[CSS] 이미지를 좋은 느낌(중앙에서 원형)으로 표시

Rails를 공부하고 있는데 오늘은 CSS로 그림을 잘 보여주고 싶어요.(한숨 돌리고)

원형을 유지하다

image.html

<div class="box">
  <img src="image.jpg" class="image">
</div>

style.css

.box {
  width: 300px;
  height: 300px;
  position: relative;
}
.image {
  position: absolute;
}

'box'라는 상자 안에'image'라는 그림이 놓여 있다.
"box"의 사이즈는 300px각입니다. 그러면 그림이 커집니다.

오버헤드 잘라내기

부모 요소'box'에 오버플로우 속성을 추가합니다.
style.css

.box {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden; /*追加*/
}
.image {
  position: absolute;
}

히든이면 노출된 부분은 잘라낼 수 있어요.근데 하늘만 찍혔어.

이미지 가운데 맞춤

나는 그림의 중심을'box'의 중심으로 삼고 싶다.
style.css

.box {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}
.image {
  position: absolute;
  top: 50%; /*追加*/
  left: 50%; /*追加*/
}

우선, absolute를 사용하여 왼쪽 위에서 50% 로 그림의position을 지정합니다.그림% 1개의 캡션을 편집했습니다.(여기 50%는'박스'의 절반)

style.css

.box {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /*追加*/
}

그런 다음 transform의 translate를 사용하여 XY 방향으로 이미지를 -50% 이동합니다.(여기 50%는 그림의 반)
이렇게 하면 그림의 중심을'box'의 중심으로 가져갈 수 있다.

동그래지다

마지막으로 경품으로'박스'를 둥글게 해주세요.
style.css

.box {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 300px; /*追加*/
}
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%); /*調整*/
}

borderradius 속성의 값은width,height와 같으면 원입니다.위치 조정 후 완료.

감사합니다.