Я получил простой html, как показано ниже, моя цель - сделать изображение полностью заполнением страницы полностью и пропорционально и без вертикальной полосы прокрутки.
изображение, которое я использую https://www.dropbox.com/s/w7t8sj7e5f86s8d/Dior2d1.jpg.zip
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="mainImg"><img src="my_big_photo.jpg"></div>
</body>
</html>
html, body{
width: 100%;
height: 100%;
}
.mainImg{
width: 100%;
height: 100%;
}
.mainImg img{
width: 100%;
height: 100%;
}
В трюках CSS есть статья об этом. Вы хотите технику номер 2.
С существующим HTML вы хотите что-то вроде этого:
body {
margin: 0;
}
.mainImg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.mainImg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Есть ли причина, по которой вы не загружаете изображение в браузере вместо html-страницы, содержащей изображение? Обычно, когда кто-то хочет покрыть всю страницу изображением, он используется только как фоновое изображение. Если это так, вы можете установить фоновое изображение для тела в стиле css/.