728x90
.slide-box img {
/* width: 100%; */
max-width: 820px;
/* padding: 20px; */
height: auto;
border-radius: 2vw; /* 뷰포트 너비에 따라 둥근 모서리 크기 조정 */
display: block;
margin: auto;
/* text-align: center; */
/* height: auto; 이미지가 세로로 늘어나지 않도록 추가 */
}
max-width: 820px; 를 줬더니
화면은 늘려도 이미지가 엄청 크게 늘어나지 않음.
.slide-box img {
/* 사진 조금 잘리는 걸 아래의 코드로 해결.*/
width: 100%;
max-width: 920px;
height: auto;
border-radius: 20px;
display: block;
margin: auto;
}
사진이 조금 잘리길래
width: 100% 로 주고
더 마구잡이로 커지지 않게 이미지 사이즈 제한도 줬다.
max-width: 920px
@media screen and (max-width: 1200px) {
.wrapper {
max-width: auto;
}
.navbar a {
font-size: 22px;
}
/* .slide-box img {
max-width: 820px;
} */
}
/* .slide-box img {
max-width: 820px;
} */
미디어 쿼리에
max-width 도 줬었는데 별 의미 없어서 삭제.
728x90
'> 포트폴리오 > 맥도날드' 카테고리의 다른 글
[HTML / CSS] 햄버거 언더 메뉴바 만들기 (1) (0) | 2024.03.26 |
---|---|
[CSS] li 태그 - 가로 정렬, 밑줄 제거 (0) | 2024.03.24 |
border-radius 화면 축소 시 변형이 올 때 (0) | 2024.03.19 |
반응형 웹페이지 축소 - 모바일 사이즈 display: none (0) | 2024.03.19 |
반응형 웹사이트 만들기 - max-width / min-width (0) | 2024.03.19 |