강의

멘토링

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của i1004gy4926
i1004gy4926

câu hỏi đã được viết

Tiếp theo + Tạo dịch vụ SNS bằng React Query

Tạo vùng đa ảnh

css <Link>와 <img>크기 지정

Viết

·

296

0

제로초님이 강의 하시다 Link태그 안에 img 태그를 넣는 방식으로 하시다가 사진 두개를 넣는 부분 부터 이작업을 안하셨는데 두번 째 방식까지는

.postImageSection img {
  border-radius: 16px;
  height: 100%;
  width: 100%;
}

img 태그에 100%를 주는 방법으로 해결했지만

그림 3개를 넣는 부분 부터는 크기가 맞지 않습니다 어떻게 해결하면 크기가 정확히 맞을까요?


if (post.Images.length === 3) {
    return (
      <div className={cx(style.postImageSection, style.threeImage)}>
        <Link
          href={`/${post.User.id}/status/${post.postId}/photo/${post.Images[0].imageId}`}
          style={{
            backgroundImage: `url(${post.Images[0]?.link})`,
            backgroundSize: "cover",
          }}
        >
          <img src={post.Images[1]?.link} alt="" />
        </Link>
        <div>
          <Link
            href={`/${post.User.id}/status/${post.postId}/photo/${post.Images[1].imageId}`}
            style={{
              backgroundImage: `url(${post.Images[1]?.link})`,
              backgroundSize: "cover",
            }}
          >
            <img src={post.Images[1]?.link} alt="" />
          </Link>
          <Link
            href={`/${post.User.id}/status/${post.postId}/photo/${post.Images[2].imageId}`}
            style={{
              backgroundImage: `url(${post.Images[2]?.link})`,
              backgroundSize: "cover",
            }}
          >
            <img src={post.Images[2]?.link} alt="" />
          </Link>
        </div>
      </div>
    );

 

reactnext.jsreact-querynext-authmsw

Câu trả lời 2

0

i1004gy님의 프로필 이미지
i1004gy
Người đặt câu hỏi

답변이 늦어서 죄송합니다

이런식으로 깨지고 신기한건 link 태그의 크기가 img태의 크기에 맞춰서 늘어납니다

img태그를 지우면

이렇게 나옵니다

zerocho님의 프로필 이미지
zerocho
Người chia sẻ kiến thức

img 태그에 object-fit: cover 같은거 한 번 줘보시면 좋을 것 같습니다. width height 없애고요

i1004gy님의 프로필 이미지
i1004gy
Người đặt câu hỏi

.postImageSection img {
  border-radius: 16px;
  object-fit: cover;
}

이렇게 css를 변경했더니

image

이런식으로 나오네요 ㅠㅠ

0

zerocho님의 프로필 이미지
zerocho
Người chia sẻ kiến thức

width: 100%; height: 100% 하면 어떤 식으로 틀어지나요?

Hình ảnh hồ sơ của i1004gy4926
i1004gy4926

câu hỏi đã được viết

Đặt câu hỏi