Блог

Главная - Вопросы по программированию - Как я могу создать адаптивное фоновое изображение?

Как я могу создать адаптивное фоновое изображение?

#html #css #background

#HTML #css #фон

Вопрос:

Я пытаюсь попробовать функцию фонового изображения, но почему-то ширина изображения: 1350 пикселей; Я не могу подогнать часть контейнера, даже если я подогнал ее, она не реагирует. Когда экран сжимается, части фотографии не исчезают. Я хочу, чтобы оно было таким же маленьким, как экран, и помещалось в контейнер. Каково решение этой проблемы?

 * {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  background-repeat: no-repeat;
}

.image{
  max-width: 1350px;
  background-size: cover;
}

.container {
  max-width: 1350px;
  height: 600px;
}

a {
  text-decoration: none;
  color: white;
}

.wrap {
  position: relative;
  display: inline-flex;
  float: right;
  width: 420px;
  height: 100%;
}

.boxes {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
}

.btn-black {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: black;
  margin-bottom: 0.9rem;
  width: 180px;
  height: 70px;
  align-items: center;
  overflow: hidden;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

.btn-black i {
  margin-bottom: 0.4rem;
}

.box-1 .btn-black span {
  width: 200px;
} 
 <!DOCTYPE html>
<html lang="tr" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Bootstrap</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512- 4zCK9k qNFUR5X cKL9EIR ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
  <link rel="stylesheet" href="css/berkay.css">
  <link rel="stylesheet" href="css/global.css">
  <link rel="stylesheet" media="(max-width:768px)" href="css/tablet.css">
  <link rel="stylesheet" media="(max-width:500px)" href="css/mobile.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300amp;display=swap" rel="stylesheet">
</head>

<body>
  <div class="image" style="background-image: url(https://orangestate.net/wp-content/uploads/2017/09/Facebook-Post-Landscape-Banners-Travel-07.png);">
  <div class="container">
    <div class="wrap">
      <div class="boxes">
        <div class="box box-1">
          <a class="btn-black" href="#">
            <i class="fas fa-camera"></i>
            <span>GÖRÜNTÜLÜ KONUŞMA</span>
          </a>
        </div>
        <div class="box">
          <a class="btn-black" href="#">
            <i class="fas fa-camera"></i>
            <span>EMLAKÇILARIMIZ</span>
          </a>
        </div>
        <div class="box">
          <a class="btn-black" href="#">
            <i class="fas fa-camera"></i>
            <span>EVLERİMİZ</span>
          </a>
        </div>
        <div class="box box-4">
          <a class="btn-black" href="#">
            <i class="fas fa-camera"></i>
            <span>ŞUBELERİMİZ</span>
          </a>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>

</html>

Ответ №1:

Добавить

 .image {background-size: contain;}

Это должно решить проблему.

Редактировать: не «.img»

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

1. 375 X 812 Вид экрана очень маленький, вот так hizliresim.com/Mgnu55 , и он не занимает 1350 пикселей в обычном размере.

2. кстати, это не очень хороший стиль для работы с фоновыми изображениями. Вместо этого создайте контейнер, поместите div внутри для изображения и поместите div в качестве наложения. Это намного удобнее и решает многие проблемы. Пример: addin.online/de

Ответ №2:

Bootstrap 4 предоставляет класс img-fluid . Для этого вы можете попробовать следующее:

 <div class="image img-fluid"
        style="background-image: url(https://orangestate.net/wp-content/uploads/2017/09/Facebook-Post-Landscape-Banners-Travel-07.png);">
       
   <!-- your code inside -->

</div>

Для вашего .image измените его на это:

 .image {
    max-width: 100%;
    height: auto;
    background-size: cover;
}

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

1. Это не работает, размер контейнера составляет 1350 пикселей, но фотография занимает 100% экрана, и фотография все равно становится меньше, когда экран становится меньше.

Ответ №3:

 .image{
background-position: center;
background-size: cover;

}
Метки: