* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
이미지를 제 사진을 선택했습니다(jpg)
이미지 삽입 후 사진일 잘 보이지 않아서
background-size : cover;
입력했는데, 아래와 같이 나오네요.
코드스니펫의 이미지를 사용하니 정상적으로 나오는 것은 확인했구요.
사진이 너무 커서 그런걸까요?
[제 사진으로 할 시]
[코드스니펫 이미지로 할 시]
작성한 코드 및 에러 메세지
.photo-frame {
background-color: white;
margin: 15px 20px;
height: 200px;
background-size: cover;
}
.footer {
display: flex;
flex-direction: column;
align-items: center;
}
.f-title {
color: white;
font-size: 25px;
font-weight: 900;
}
.f-date {
color: white;
font-size: 15px;
font-weight: 500;
}
#image1 {
background-image: url('./img1.png');
}
</style>
</head>
<body>
<div class="container">
<div class="photos">
<div id="image1" class="photo-frame">
<span id="desc1" class="photo_description">
첫 번째 이미지 설명
</span>
</div>
<div id="image2" class="photo-frame">
<span id="desc2" class="photo_description">
두 번째 이미지 설명
</span>
</div>
<div id="image3" class="photo-frame">
<span id="desc3" class="photo_description">
세 번째 이미지 설명
</span>
</div>
<div id="image4" class="photo-frame">
<span id="desc4" class="photo_description">
네 번째 이미지 설명
</span>
</div>
<div class="footer">
<p class="f-title">Happy Lunch Time</p>
<p class="f-date">2023.01.25</p>
</div>
</div>
</div>
</body>
</html>
