为了对应用程序进行响应式设计，我们还需要使图像响应式。如果图像没有响应，应用程序中就会发生溢出，并且看起来最糟糕。
因此，我们还需要根据父元素的尺寸按比例增加或减少图像的尺寸。在这里，我们将学习使用 CSS 按比例调整图像大小的各种方法。
语法
用户可以按照以下语法使用“width”CSS 属性按比例调整图像大小。
img { width: 100%; height: auto;}
在上面的语法中，我们为图像设置了 100% 宽度和自动高度，使其具有响应能力。
立即学习“前端免费学习笔记（深入）”；
示例
在下面的示例中，我们创建了 div 元素，并指定了“image”类名称，并在 div 元素内添加了一个图像作为子元素。
在 CSS 中，我们以百分比形式设置 div 元素的宽度，等于总宽度的 30%。此外，我们还为图像设置了 100% 宽度和自动高度。用户可以更改屏幕尺寸并观察图像尺寸与屏幕尺寸成比例地减小和增大。
.image { width: 30%; margin: 0 auto; border: 3px solid red; padding: 10px; } img { width: 100%; height: auto; } Using the width CSS property to resize image proportionally
示例
在下面的示例中，我们使用了“object-fit: contains”CSS 属性来按比例缩小图像的大小。在这里，我们设置了图像的父 div 元素的比例宽度。此外，我们还为“img”元素使用了“object-fit: contains”CSS 属性。在输出中，用户可以观察到图像是响应式的，并且其尺寸根据 div 元素的尺寸而变化。
.image { width: 30%; margin: 0 auto; border: 3px solid red; padding: 10px; } img { width: 100%; height: 50%; object-fit: contain; } Using the object-fit: contain CSS property to resize image proportionally
示例
在下面的示例中，我们使用“background-size”CSS 属性按比例更改图像的尺寸。在这里，我们为 div 元素设置了背景图像。此外，我们还使用“contain”作为“background-size”CSS 属性的值。它将图像分散到整个 div 中。如果 div 元素的尺寸增加，图像大小也会增加。如果 div 元素的尺寸减小，图像的尺寸也会减小。
.image { width: 30%; min-height: 30%; margin: 0 auto; border: 3px solid red; padding: 10px; background-image: url("https://www.chuangxiangniao.com/wp-content/uploads/2025/12/tutorials_point.jpg"); background-size: contain; background-repeat: no-repeat; } Using the background-size CSS property to resize image proportionally
用户学会了按比例更改图像尺寸。在这里，我们需要做的就是以百分比而不是像素或 rem 来设置图像尺寸。此外，用户还可以使用“background-size”CSS 属性按比例更改背景图像的尺寸。
以上就是使用 CSS 按比例调整图像大小的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625662.html
微信扫一扫 
支付宝扫一扫 
