답변 1개
채택된 답변
+20 포인트
2년 전
다음과 같은 방법으로 해 볼 수 있을 것 같습니다.
참고하셔서 구현하시면 될 것 같습니다
1. 이미지의 크기 및 위치 설정
</p>
<p>.slide1 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
animation: fade 1s infinite alternate;
}CSS 스타일에서 width: 100%; 및 height: 100%;를 사용하고 있으며, 이미지가 뷰포트에 맞추어 확장되도록 설정되어 있으나, 이미지가 잘려서 보인다면, 이미지의 종횡비(가로와 세로의 비율)와 화면 크기가 어떻게 관련되는지 고려해야함
2. 이미지 경로
이미지 파일의 경로를 지정할 때 역슬래시(\) 대신 슬래시(/)를 사용해야함. HTML에서 파일 경로를 지정할 때 일반적으로 슬래시를 사용해야 하며 따라서 이미지 경로는 다음과 같이 수정해야 합니다
</p>
<p><img class="slide1" src="c:/display/a.jpg">
<img class="slide1" src="c:/display/b.jpg">
<img class="slide1" src="c:/display/c.jpg">
3. 이미지의 종횡비
이미지의 종횡비가 화면 크기와 일치하지 않으면 이미지가 잘려서 보일 수 있습니다. 이미지가 원래의 종횡비를 유지하면서 크기를 조정하려면 object-fit 속성을 사용하는 대신 이미지를 <img> 요소 내에 감싸서 종횡비를 설정할 수 있습니다. 이미지가 원래의 가로-세로 비율을 유지하도록 수정
</p>
<p><div class="slide1">
<img src="c:/display/a.jpg" alt="Image A">
</div>
<div class="slide1">
<img src="c:/display/b.jpg" alt="Image B">
</div>
<div class="slide1">
<img src="c:/display/c.jpg" alt="Image C">
</div>
4. css 수정
</p>
<p>.slide1 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide1 img {
width: 100%;
height: 100%;
object-fit: cover;
}
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
�
짱구짱구
2년 전
�
짱구짱구
2년 전
3번의 종횡비 <img src="c:/display/a.jpg" alt="Image A">에서 Image A <- 이 부분은 이대로 적용 해야 하나요 ?
아님 100% 또는 1080px 이런식으로 수정해야 할까요 ?
아님 100% 또는 1080px 이런식으로 수정해야 할까요 ?
�
웹메이킹
2년 전
부모의 크기에 따라 적절히 조절하시면 되지 않을까 합니다.
Alt 속성은 지우셔도 되고 그대로 유지 하셔도 됩니다. Alt속성은 종횡비와는 무관합니다
Alt 속성은 지우셔도 되고 그대로 유지 하셔도 됩니다. Alt속성은 종횡비와는 무관합니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
답변 감사 드립니다.