版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33240556/article/details/139662162
在网页设计中，实现图片自适应屏幕大小可以使页面在不同设备上都能良好显示。以下是几种常见的 CSS 方法，帮助你实现图片自适应屏幕大小。
方法一：使用 max-width 和 height: auto
这种方法确保图片的宽度不会超过其容器的宽度，并保持其纵横比。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image</title>
<style>
.responsive-img {
max-width: 100%;
height: auto;
}
</style></head><body>
<img src="path-to-your-image.jpg" alt="Sample Image" class="responsive-img"></body></html>
方法二：使用 width: 100% 和 height: auto
这种方法确保图片的宽度总是其容器的 100%，并保持其纵横比。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image</title>
<style>
.responsive-img {
width: 100%;
height: auto;
}
</style></head><body>
<img src="path-to-your-image.jpg" alt="Sample Image" class="responsive-img"></body></html>
方法三：使用 object-fit 属性
object-fit 属性允许你控制替换元素的内容如何适应其框。对于图片，可以使用 object-fit: cover 或 object-fit: contain。
使用 object-fit: cover
这种方法确保图片填充整个容器，但可能会裁剪图片的一部分。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image</title>
<style>
.responsive-img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style></head><body>
<div style="width: 100%; height: 400px;">
<img src="path-to-your-image.jpg" alt="Sample Image" class="responsive-img">
</div></body></html>
使用 object-fit: contain
这种方法确保图片在容器内完整显示，并保持其纵横比。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image</title>
<style>
.responsive-img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style></head><body>
<div style="width: 100%; height: 400px;">
<img src="path-to-your-image.jpg" alt="Sample Image" class="responsive-img">
</div></body></html>
方法四：使用 CSS Flexbox
在使用 Flexbox 布局时，可以使图片自适应父容器的大小。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
}
.responsive-img {
max-width: 100%;
height: auto;
}
</style></head><body>
<div class="container">
<img src="path-to-your-image.jpg" alt="Sample Image" class="responsive-img">
</div></body></html>
总结
通过使用 max-width, width: 100%, object-fit 以及 Flexbox 等方法，你可以轻松实现图片自适应屏幕大小。这些方法可以单独使用，也可以结合使用，以满足不同的设计需求。
