如何使用 CSS 自动调整图像大小以适应 DIV 容器
主题：HTML / CSS上一页|下一页
答案：使用 CSS max-width 属性
您可以简单地使用 CSS max-width 属性来自动调整大图像的大小，以便它可以适应较小宽度的 <div> 容器，同时保持其纵横比。
此外，如果您有一个固定高度的 div 元素，您还可以应用 max-height 属性，这样图像就不会从 div 的边界水平或垂直溢出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Resize Image Proportionally with CSS</title>
<style>
img{
max-width: 100%;
max-height: 100%;
display: block; /* 删除图片下方的多余空间 */
}
.box{
width: 250px;
border: 5px solid black;
}
.box.large{
height: 300px;
}
.box.small{
height: 100px;
}
</style>
</head>
<body>
<h2>Image inside Auto-height Div</h2>
<div class="box">
<img src="images/sky.jpg" alt="Cloudy Sky">
</div>
<br>
<h2>Image inside Portrait Div</h2>
<div class="box large">
<img src="images/sky.jpg" alt="Cloudy Sky">
</div>
<br>
<h2>Image inside Landscape Div</h2>
<div class="box small">
<img src="images/sky.jpg" alt="Cloudy Sky">
</div>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements