CSS图片更改大小

更新时间：2021-08-27 10:59:09 来源：动力节点浏览705次

有时，需要将图像拟合到某个给定的维度。我们可以通过指定图像的宽度和高度来调整图像大小。一个常见的解决方案是使用max-width: 100%; 和高度：自动;以便大图像不超过其容器的宽度。CSS的max-width和max-height属性效果更好，但许多浏览器不支持它们。

调整图像大小的另一种方法是使用适合图像的object-fit属性。此CSS属性指定如何调整视频或图像的大小以适合其内容框。它定义了元素如何适应具有既定宽度和高度的容器。

的对象配合属性通常适用于图像或视频。此属性定义元素如何响应其容器的宽度和高度。object-fit属性的值主要有fill、contain、cover、none、scale-down、initial、inherit五个值。此属性的默认值为"fill"。

例子

在这个例子中，我们使用max-width: 100%;来调整图像的大小。和高度：自动;特性。

<!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>

输出