홈>2020-02-25 23:52

html - 브라우저에 맞게 css 이미지 크기 조정

이미지를 사용하여 배경 이미지와 마찬가지로 브라우저에 맞게 이미지 크기를 조정하려고합니다

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>

htmlcssimageimage-resizing

답변 # 1
CSS 재설정 시도
```
body {
  margin: 0;
  padding: 0;
}
```
또는

https://css-tricks.com/perfect-full-page-background-image/를 참조하십시오

도움이 되길 바란다

Python2.net

html - 브라우저에 맞게 css 이미지 크기 조정

관련 자료