Html 如何在任何屏幕上保持图像容器的1:1纵横比？
我正在设计一个图库，其中显示了页面上所有图像的列表。现在，我将图像保存在一个容器中，以便所有图像在屏幕上保持特定的大小。所以同样的CSS是Html 如何在任何屏幕上保持图像容器的1:1纵横比？,html,css,Html,Css,我正在设计一个图库，其中显示了页面上所有图像的列表。现在，我将图像保存在一个容器中，以便所有图像在屏幕上保持特定的大小。所以同样的CSS是 .gallery-image{ border-radius: 2rem !important; overflow: hidden; position: relative; background-color: black; width: 100%; height: 100%; z-index: 99;
.gallery-image{
border-radius: 2rem !important;
overflow: hidden;
position: relative;
background-color: black;
width: 100%;
height: 100%;
z-index: 99;
}
.image-box{
opacity: 0.6 !important;
height: 150px;
width: 100%;
object-fit: cover;
overflow: hidden;
transition:all 0.3s ease-in-out !important;
}
.image-box:hover{
opacity: 1 !important;
transform: scale(1.2);
overflow: hidden;
}
<div class="col-md-2 col-sm-4 col-4 my-2 align-self-center">
<div class='gallery-image'>
<img src={baseUrl + image.path} class="image-box" />
</div>
</div>
.gallery图像{
边界半径：2rem！重要；
溢出：隐藏；
位置：相对位置；
背景色：黑色；
宽度：100%；
身高：100%；
z指数：99；
}
.图像框{
不透明度：0.6！重要；
高度：150像素；
宽度：100%；
对象匹配：覆盖；
溢出：隐藏；
过渡：所有0.3轻松输入输出！重要；
}
.图像框：悬停{
不透明度：1！重要；
转换：比例（1.2）；
溢出：隐藏；
}