CSS 图片适应div|极客教程

CSS 图片适应div

在网页设计中，经常会遇到需要将图片放置在一个固定大小的div中，并且让图片适应这个div的大小的情况。在这篇文章中，我们将详细介绍如何使用CSS来实现图片适应div的效果。

1. 使用background-image属性

一种常见的方法是使用background-image属性来设置div的背景图片，并通过background-size属性来控制图片的大小适应div。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS图片适应div</title>
<style>
    .image-container {
        width: 300px;
        height: 200px;
        background-image: url('https://static.deepinout.com/gk-static/logo.png');
        background-size: cover;
        background-position: center;
    }
</style>
</head>
<body>
<div class="image-container"></div>
</body>
</html>

代码运行结果:

CSS 图片适应div

在这个示例中，我们创建了一个宽度为300px，高度为200px的div，并将一张图片作为背景图片设置在这个div中。通过设置background-size为cover，我们让图片完全覆盖整个div，并保持图片的宽高比例。

2. 使用object-fit属性

另一种常见的方法是使用object-fit属性来控制图片在img标签中的显示方式，使其适应div的大小。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS图片适应div</title>
<style>
    .image-container {
        width: 300px;
        height: 200px;
        overflow: hidden;
    }
    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>
</head>
<body>
<div class="image-container">
    <img src="https://static.deepinout.com/gk-static/logo.png" alt="image">
</div>
</body>
</html>

代码运行结果:

CSS 图片适应div

在这个示例中，我们创建了一个宽度为300px，高度为200px的div，并在其中插入了一个img标签来显示图片。通过设置object-fit为cover，我们让图片完全覆盖整个img标签，并保持图片的宽高比例。

3. 使用max-width和max-height属性

除了上述两种方法，我们还可以使用max-width和max-height属性来控制图片的大小适应div。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS图片适应div</title>
<style>
    .image-container {
        width: 300px;
        height: 200px;
        overflow: hidden;
    }
    .image-container img {
        max-width: 100%;
        max-height: 100%;
    }
</style>
</head>
<body>
<div class="image-container">
    <img src="https://static.deepinout.com/gk-static/logo.png" alt="image">
</div>
</body>
</html>

代码运行结果:

CSS 图片适应div