用html和css调整图像大小

Question

伙计们，我正在学习网络开发，在使图像响应方面遇到了问题。你能告诉我这里应该换什么吗

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>