创建 HTML
- 创建一个带有“box”类的 <div> 元素。
- 使用 src 属性在 <img> 标记中设置图像的 URL，并指定 alt 属性。
<body>
<div class="box">
<img src="https://onitroad.com/notebook.png" alt="Example image"/>
</div>
</body>
使图像拉伸以适应 <div> 容器并不复杂。
CSS 可以调整图像大小以适应 HTML 容器。
要自动调整图像或者视频的大小，我们可以使用本教程中介绍的各种 CSS 属性。
如果我们按照下面描述的步骤操作，这将非常容易。
让我们看一个例子并尝试讨论代码的每一部分。
添加 CSS
- 设置 <div> 的高度和宽度。
- 我们可以使用带有 border-width、border-style 和 border-color 属性值的 border 属性为 <div> 添加边框。
- 将图像的高度和宽度设置为“100%”。
.box {
width: 30%;
height: 200px;
border: 5px dashed #f7a239;
}
img {
width: 100%;
height: 100%;
}
让我们把代码部分放在一起，看看它是如何工作的！这是我们代码的结果。
使用宽度和高度属性自动调整图像大小的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.box {
width: 30%;
height: 200px;
border: 5px dashed #f7a239;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<img src="https://onitroad.com/notebook.png" alt="Example image"/>
</div>
</body>
</html>
在下面的示例中，我们使用 object-fit 属性的“cover”值。
使用“cover”值时，内容的纵横比会在填充元素的内容框时调整大小。
它将被剪裁以适合内容框。
使用设置为“cover”的 object-fit 属性调整图像大小的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 60%;
height: 300px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<img src="https://onitroad.com/pencil.png" alt="Image" />
</div>
</body>
</html>
请参阅另一个示例，其中手动设置图像大小，并且还设置了 object-fit 属性。
在这种情况下，当浏览器调整大小时，图像将保留其纵横比，不会根据容器调整大小。
使用 object-fit 属性调整图像大小的示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
img {
width: 400px;
height: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<img src="https://onitroad.com/pencil.png" alt="Image">
</body>
</html>
在下一个示例中，我们使用 max-width 和 max-height 属性。
max-height 属性设置元素的最大高度，max-width 属性设置元素的最大宽度。
要按比例调整图像大小，请将高度或者宽度设置为“100%”，但不能同时设置两者。
如果我们将两者都设置为“100%”，则图像将被拉伸。
使用 max-width 和 max-height 属性自动调整图像大小的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img {
max-width: 100%;
max-height: 100%;
}
div {
border: 2px dotted #000000;
}
.portrait {
height: 100%;
width: 40px;
}
.landscape {
height: 100%;
width: 80px;
}
.square {
height: 100%;
width: 100px;
}
</style>
<body>
<p>Portrait Div</p>
<div class="portrait">
<img src="http://onitroad.com/pencil.png" alt="Circle portrait">
</div>
<p>Landscape Div</p>
<div class="landscape">
<img src="http://onitroad.com/pencil.png" alt="Circle landscape">
</div>
<p>Square Div</p>
<div class="square">
<img src="http://onitroad.com/pencil.png" alt="Circle square">
</div>
</body>
</html>
要将图像用作 CSS 背景，请使用 background-size 属性。
此属性提供两个特殊值：包含和覆盖。
让我们看看具有这些值的示例。
使用设置为“包含”的 background-size 属性调整图像大小的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.box {
width: 300px;
height: 250px;
background-image: url("https://onitroad.com/pencil.png");
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在下一个示例中，图像被裁剪。
使用设置为“cover”的 background-size 属性调整图像大小的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.box {
width: 300px;
height: 250px;
background-image: url("https://onitroad.com/pencil.png");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
日期：2020-06-02 22:14:57 来源：oir作者：oir