数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用 CSS 按比例调整图像大小
为了使应用程序具有响应式设计，我们还需要使图像具有响应性。如果图像没有响应性，应用程序中就会出现溢出，看起来很糟糕。
因此，我们还需要根据父元素的尺寸按比例增加或减少图像的尺寸。在这里，我们将学习使用 CSS 按比例调整图像大小的各种方法。
语法
用户可以按照以下语法使用“width” CSS 属性按比例调整图像大小。
img {
width: 100%;
height: auto;
}
在上面的语法中，我们为图像设置了 100% 的宽度和自动高度，使其具有响应性。
示例
在下面的示例中，我们创建了 div 元素，赋予它“image”类名，并在 div 元素内添加了一个图像作为子元素。
在 CSS 中，我们以百分比设置了 div 元素的宽度，等于总宽度的 30%。此外，我们为图像设置了 100% 的宽度和自动高度。用户可以更改屏幕尺寸，并观察到图像大小会根据屏幕尺寸按比例减小和增大。
<html>
<head>
<style>
.image {
width: 30%;
margin: 0 auto;
border: 3px solid red;
padding: 10px;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2> Using the <i> width CSS property </i> to resize image proportionally </h2>
<div class = "image">
<img src = "https://tutorialspoint.com/python_pillow/images/tutorials_point.jpg" alt = "logo">
</div>
</body>
</html>
示例
在下面的示例中，我们使用了“object-fit: contain” CSS 属性来按比例减小图像的大小。在这里，我们为图像的父 div 元素设置了比例宽度。此外，我们还为“img”元素使用了“object-fit: contain” CSS 属性。在输出中，用户可以观察到图像具有响应性，其尺寸会根据 div 元素的尺寸变化。
<html>
<head>
<style>
.image {
width: 30%;
margin: 0 auto;
border: 3px solid red;
padding: 10px;
}
img {
width: 100%;
height: 50%;
object-fit: contain;
}
</style>
</head>
<body>
<h3> Using the <i> object-fit: contain CSS property </i> to resize image proportionally </h3>
<div class = "image">
<img src = "https://tutorialspoint.com/python_pillow/images/tutorials_point.jpg" alt = "logo">
</div>
</body>
</html>
示例
在下面的示例中，我们使用了“background-size” CSS 属性来按比例更改图像的尺寸。在这里，我们为 div 元素设置了背景图像。此外，我们还使用了“contain”作为“background-size” CSS 属性的值。它将图像扩展到整个 div。如果 div 元素的尺寸增加，图像大小也会增加。如果 div 元素的尺寸减小，图像大小也会减小。
<html>
<head>
<style>
.image {
width: 30%;
min-height: 30%;
margin: 0 auto;
border: 3px solid red;
padding: 10px;
background-image: url("https://tutorialspoint.com/python_pillow/images/tutorials_point.jpg");
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h3> Using the <i> background-size CSS property </i> to resize image proportionally </h3>
<div class = "image"></div>
</body>
</html>
用户学习了如何按比例更改图像尺寸。在这里，我们只需要将图像尺寸设置为百分比，而不是像素或 rem。此外，用户还可以使用“background-size” CSS 属性来按比例更改背景图像的尺寸。
424 次浏览
