홈>
이미지를 사용하여 배경 이미지와 마찬가지로 브라우저에 맞게 이미지 크기를 조정하려고합니다
max-width:100%;
height:auto;
max-height:100%;
그러나 이미지가 화면에 맞게 크기가 조정되지 않고 브라우저 크기를 조정하려고했습니다. 이미지는 어디에나 갈 것입니다. 크기 조정이 발생할 때 이미지가 동일한 지점에 머무르기를 원합니다. 내가 놓친 것에 대한 아이디어가 있습니까?
body{
background: url(http://www.planwallpaper.com/static/images/518169-backgrounds.jpg)no-repeat center center fixed;
background-size: 100%;
}
.boat2{
width: 400px;
position:absolute; bottom: 160px; left: 800px;z-index: 1;
}
.cabbage{
width: 150px;
position:absolute; bottom: 290px; right: 290px;z-index: 1;
}
.sheep{
width: 150px;
position:absolute; bottom: 300px; right: 180px;z-index: 1;
}
.wolf{
width: 300px;
position:absolute; bottom: 270px; right: -80px;z-index: 1;
}
img {
max-width:100%;
height:auto;
max-height:100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>IQ River Crossing</title>
</head>
<body>
<div class="image">
<img class="boat2"src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
<img class="cabbage" src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
<img class="sheep" src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
<img class="wolf" src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
</div>
</body>
</html>
- 답변 # 1
관련 자료
- python - 최고 PIL 품질보다 나은 브라우저 이미지 크기 조정
- shell - apple automator/스크립팅 - 동일한 이미지를 여러 크기로 조정
- html - 브라우저 화면의 크기를 조정할 때 단락 아래에 이미지를 어떻게 배치합니까?
- php - 쿼리 문자열을 기준으로 이미지 크기 조정
- html 태그가 브라우저에서 PHP를 사용하여 이미지를 표시하지 않습니다
- OpenCv Python에서 이미지 크기 조정, 색상으로 공간 채우기
- html - 영웅 이미지의 너비를 올바르게 조정하려면 어떻게해야합니까?
- android - 이미지 배열의 크기를 조정하는 방법?
- c# - 이미지 및 비디오에 대한 브라우저 호환성/지원을 확인하는 방법은 무엇입니까?
- java - 세로 탐색 바를 기준으로 이미지 크기를 조정 하시겠습니까?
- 자바 스크립트에서 이미지 크기를 조정하는 방법
- imagick - ImageMagick 및 PHP를 사용하여 큰 이미지 tiff 형식을 특정 파일 크기로 크기 조정
- html - 화면 크기에 따라 PHP에서 이미지 크기를 조정하는 방법은 무엇입니까?
- php - 입술 - 예상보다 큰 경우에만 이미지 크기 조정
- 레일을 사용하여 imagemagick에서 이미지 크기를 조정하는 방법은 무엇입니까?
- python 3.x - Thumbnail () 및 resize ()에서 Image 객체를 저장하는 것이 다른 이유는 무엇입니까?
- python - openCV를 사용하여 최대 너비와 높이로 이미지 크기 조정
- javascript - 모든 방향으로 이미지 크기를 조정할 수있는 방법은 무엇입니까?
- javascript - 브라우저에서 크기를 조정할 때 페이지가 스크롤되는 이유는 무엇입니까?
- android - ImageButton은 이미지 크기를 조정하지 않습니다
관련 질문
- css : div 너비를 사용하지 않고 동일한 줄에 이미지와 일부 텍스트를 정렬 하시겠습니까?
- html : 중단 점에서 배경 이미지가 사라짐 (부트 스트랩)
- html : 내비게이션에서 첫 번째 이미지
- html : png 이미지가 자꾸 잘림
- 행 내용을 오른쪽 수평 html에 정렬
- html : CSS 엔티티로 화살표 아이콘을 추가하고 반응 형으로 만드는 방법
- html 또는 css에서
- html : CSS 그리드를 사용하여 테두리 축소
- html : 순수 CSS를 사용하여 div를 인 /아웃하는 방법이 있습니까?
- javascript : 라디오 선택 값을 이미지로 변경
CSS 재설정 시도
또는
https://css-tricks.com/perfect-full-page-background-image/를 참조하십시오
도움이 되길 바란다