Блог

Ребята, я изучаю веб-разработку и испытываю проблемы с адаптивностью изображения. Не могли бы вы сказать мне, что я должен здесь изменить

HTML-код

 <div class="carousel-item active" style="background: url(assets/img/slide/slide-1.jpg);">
 

CSS

 #hero {
       width: 100%;
       height: 100vh;
        background-color: rgba(39, 37, 34, 0.8);
       overflow: hidden;
       padding: 0;
      }
#hero .carousel-item {
       width: 100%;
       height: 100vh;
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
      }
#hero .carousel-item::before {
       content: "";
       background-color: rgba(12, 11, 10, 0.5);
       position: absolute;
       top: 0;
       right: 0;
       left: 0;
       bottom: 0;
     }
#hero .carousel-container {
       display: flex;
       justify-content: center;
       align-items: center;
       position: absolute;
       bottom: 0;
       top: 0;
       left: 0;
       right: 0;
     }
 

Вы можете автоматически изменить размер вашего div изображения, если поместите его в переносной div, который позволяет изменять размер. Просто убедитесь, что ваш div изображения фиксирует соотношение сторон.

Если соотношение сторон вашей оболочки не соответствует соотношению сторон изображения, появится полоса прокрутки.

 html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.resizeable-container {
  display: flex;
  align-items: center;
  justify-content: center;
  resize: both;
  overflow: auto;
  border: thin dashed red;
  width: 200px; /* Initial size */
}

.banner {
  background-image: url(http://placekitten.com/240/180);
  background-size: cover;
  aspect-ratio: 4 / 3; /* 240/180 = 4/3 */
  width: 100%;
} 

 <div class="resizeable-container">
  <div class="banner"></div>
</div>