로컬 PC에서 이미지 사이즈
본문
https://sir.kr/qa/514594?sfl=mb_id%2C1&lstx=bs3231
질문을 했는데 제이앤님께서 빠른 답변을 주셨으나 아직 미해결 중입니다.
고수님들 부탁 드립니다.
답변 1
다음과 같은 방법으로 해 볼 수 있을 것 같습니다.
참고하셔서 구현하시면 될 것 같습니다
1. 이미지의 크기 및 위치 설정
.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에서 파일 경로를 지정할 때 일반적으로 슬래시를 사용해야 하며 따라서 이미지 경로는 다음과 같이 수정해야 합니다
<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> 요소 내에 감싸서 종횡비를 설정할 수 있습니다. 이미지가 원래의 가로-세로 비율을 유지하도록 수정
<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 수정
.slide1 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide1 img {
width: 100%;
height: 100%;
object-fit: cover;
}
넵 말씀대로 다시한번 해보도록 하겠습니다.
답변 감사 드립니다.
3번의 종횡비 <img src="c:/display/a.jpg" alt="Image A">에서 Image A <- 이 부분은 이대로 적용 해야 하나요 ?
아님 100% 또는 1080px 이런식으로 수정해야 할까요 ?
부모의 크기에 따라 적절히 조절하시면 되지 않을까 합니다.
Alt 속성은 지우셔도 되고 그대로 유지 하셔도 됩니다. Alt속성은 종횡비와는 무관합니다
