在 html 和 css 中调整图像大小

Question

伙计们，我正在学习 Web 开发并且在使图像响应时遇到问题。你能告诉我我应该在这里改变什么

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;
     }

Answer 1

如果将图像 div 放置在允许调整大小的包装 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>