сделать тег img заполнить страницу полностью без создания полосы прокрутки

0

Я получил простой 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>
Теги:

3 ответа

1
Лучший ответ
html, body{
    width:　100%;
    height: 100%;
}
.mainImg{
    width:　100%;
    height: 100%;
}

.mainImg img{
    width:　100%;
    height: 100%;
}
Поделиться
  • 0
    Это полное заполнение изображения на весь экран. Но не пропорционально, для этого мне пришлось использовать js, чтобы масштабировать изображение до размера экрана, а затем обрезать, где это возможно
  • 0
    Вам не нужен JS для этого. Техники в трюках CSS должны делать то, что вы хотите
1

В трюках 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%;
}

http://jsbin.com/ekugASE/1/edit

Поделиться
  • 0
    изображение вне нормального предложения с этой техникой. мое изображение dropbox.com/s/w7t8sj7e5f86s8d/Dior2d1.jpg.zip
  • 0
    propostional? Вы имеете в виду пропорции? Он пропорционален, он просто центрируется, если изображение шире, чем в браузере
Показать ещё 3 комментария
0

Есть ли причина, по которой вы не загружаете изображение в браузере вместо html-страницы, содержащей изображение? Обычно, когда кто-то хочет покрыть всю страницу изображением, он используется только как фоновое изображение. Если это так, вы можете установить фоновое изображение для тела в стиле css/.

Поделиться
  • 0
    это простой полноразмерный слайдер изображений, который я пытаюсь сделать.
  • 0
    Хорошо, в этом случае вы можете рассмотреть возможность использования Javascript для настройки стиля на лету. Я хотел бы, чтобы мои изображения отображались с положением: абсолютным с очень высоким z-индексом. Затем, конечно, установите 100% ширину или высоту и т. Д.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню