css等比例缩放代码 |css3 边框颜色渐变

.container {
width: 100%;
height: 0;
padding-bottom: 50%;  /* 以容器宽度的50%量来设置容器高度 */
position: relative;
}
.container img {
position: absolute;
top: 0;
left: 0;
object-fit: contain;  /* 或 cover 根据需要自由选择 */
width: 100%;
height: 100%;
}

首先，大家在按比例缩放的容器上设置一个高度百分比。在此示例中设置了50％，但可以为其他任何百分比值。这使得容器的高度根据其大小自动调整。接下来，大家将图像设置为容器的绝对定位元素，并设置其宽度和高度均为100％。这意味着图像将始终填满整个容器的宽度和高度。

最后，大家使用“object-fit”属性来控制将图像调整为容器中的大小。object-fit属性有两个选项：“contain”和“cover”。如果选择contain，图像将始终缩放到容器的大小，同时保留其宽高比例。如果选择cover，则图像将按比例缩放，同时保持至少与容器大小一样大。这取决于您的项目需要哪种方法。