Блог

Главная - Вопросы по программированию - Изображение для форматирования HTML и CSS в нижней строке на веб-сайте

Изображение для форматирования HTML и CSS в нижней строке на веб-сайте

#html #css #image

#HTML #css #изображение

Вопрос:

У меня есть простая веб-страница с основным разделом, который имеет 85 вч, и «этажом», который равен 15 Вч. Элемент floor содержит изображение, которое я хочу, чтобы оно выглядело как нижняя часть страницы. Оно имеет рисунок в виде шахматной доски, который становится белым и выглядит как пол.

Мой текущий CSS работает довольно хорошо, однако проблема, с которой я сталкиваюсь, заключается в том, что когда пользователь делает окно узким (шириной менее 800 пикселей или около того), изображение пола становится очень маленьким, и это выглядит не очень хорошо, и это больше не похоже на пол.

Какие изменения я должен внести в CSS, чтобы изображение в элементе floor выглядело как «пол страницы», независимо от ширины или высоты окна? Вероятно, оно должно быть центрировано и соответствовать ширине окна, но не должно быть меньше 1920 пикселей или около того, чтобы пол выглядел одинакового размера при любой ширине окна, но автоматически обрезается для адаптации к ширине страницы.

https://jsfiddle.net/z7w41vd5/

 .wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0px auto;
}

.main {
  height: 85vh;
}

.floor {
  height: 15vh;
  min-width: 1920px;
  width: 100vw;
}

.floor img {
  width: 100%;
}  
 <div class='wrapper'>

  <div class='main'>

  </div>

  <div class='floor'>
    <img src='https://i.imgur.com/VuLVv68.png'>
  </div>

</div>

Ответ №1:

Сделайте его фоновым изображением вместо <img /> , и вы сможете управлять им так, как хотите.

 .wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0px auto;
}

.main {
    min-height: 85vh;
}

.floor {
    min-width: 1920px;
    min-height: 15vh;
    background: url(https://i.imgur.com/VuLVv68.png) bottom center;
}
  
 <div class='wrapper'>
    <div class='main'></div>
    <div class='floor'></div>
</div>

В качестве альтернативы, вы могли бы сделать его фоном <body> и полностью удалить элемент floor из вашего html.

 html {
  height: 100%;
}
body {
  background: url(https://i.imgur.com/VuLVv68.png) bottom center no-repeat;
  min-height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0px auto;
}
  
 <div class='wrapper'>
    <div class='main'></div>
</div>

Комментарии:

1. Спасибо! С благодарностью