如何在CSS中更改图片大小？
有时，需要将图片调整为特定的给定尺寸。我们可以通过指定图像的宽度和高度来调整图像的大小。常见的解决方案是使用
max-width: 100％; 和
height: auto; ，以使大图像不超过其容器的宽度。
CSS 的
max-width和
max-height属性有效更好，但许多浏览器不支持它们。
调整图像大小的另一种方法是使用
object-fit 属性，它适合图像。此CSS属性指定如何调整视频或图像的大小以适合其内容框。它定义了元素如何以既定的宽度和高度适合容器。
object-fit 属性通常应用于图像或视频。此属性定义元素如何响应其容器的宽度和高度。主要有
object-fit 属性的五个值，例如
fill、contain、cover、none、scale-down、initial和inherit。此属性的默认值为
"fill" 。
示例
在此示例中，我们通过使用
max-width: 100%;和
height: auto;属性。
<!DOCTYPE html>
<html>
<head>
<title>cell padding</title>
<style>
div {
width: auto;
text-align: center;
padding: 15px;
border: 3px solid red;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div>
<img src= "forest.jpg">
</div>
</body>
</html>
输出
示例
在此示例中，我们使用的是
object-fit: cover; 属性。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: auto;
text-align: center;
padding: 15px;
border: 3px solid red;
}
img {
object-fit: cover;
}
</style>
</head>
<body>
<div>
<img src= "forest.jpg" width = "300" height = "300">
</div>
</body>
</html>
输出
中的图片大小在上面的示例中，我们使用了
object-fit 属性的
cover 值。与上面的示例类似，我们可以使用
object-fit 属性的其他值来调整图像的大小。
