css 如何写图片比例

CSS可以通过设置图片的宽度和高度来调整它的比例。

/*通过设置width和height*/img {
    width: 50%;
    height: auto;
}

上述代码将图像的宽度设置为父容器宽度的50％，并将高度设置为自动。这意味着高度将根据宽度自动调整，以保持图像的原始比例。

/*通过设置max-width和max-height*/img {
    max-width: 100%;
    max-height: 100%;
}

上述代码将图像的最大宽度和最大高度设置为100％，这意味着图像将不会超过其父容器的大小。同样，它将保持图像的原始比例。

如果您想使用CSS调整图片的比例，而又不想限制最大宽度或最大高度，您可以设置对象的比例：

/*对象的宽高比设置为4：3*/img {
    width: 50%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 4/3;
}
    

在上面的代码中，我们通过设置对象的宽高比为4比3来调整图片的比例。我们还使用object-fit属性来填充父容器，并使用宽度50%和高度自动来保持原始比例。

CSS是调整图像比例的有用工具。当您需要调整图像大小和比例时，使用这些CSS代码为您的网站带来更好的外观和体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！