background-size: contain;
时间: 2023-12-29 11:22:48 浏览: 24
这是一个CSS属性,用于设置背景图片的大小,使其完全包含在容器中,不会超出或缩小。如果容器比图片大,则图片会被缩放以适应容器。如果容器比图片小,则图片会被缩放以适应容器。
相关问题:
1. background-size 还有哪些可选值?
2. 如何使用 background-image 属性设置背
相关问题
background-size: contain
background-size: contain是CSS属性之一,用于指定背景图片的尺寸大小。当设置为contain时,背景图片会被缩放以适应容器的大小,但是不会超出容器的范围。如果容器比图片大,则图片会被缩小以适应容器的大小;如果容器比图片小,则图片会被放大以适应容器的大小。
background-size: contain时图片高清无损,但是无法沾满整合容器,background-size: cover可以沾满容器但是不高清。我现在想要高清的同时沾满容器,也就是说我要使用background-size: contain的同时沾满容器
如果你想同时使背景图片高清且填充整个容器,可以使用`background-size: contain`和一些额外的CSS样式来实现。以下是具体的步骤:
1. 在`<el-card>`上添加一个自定义的类名,例如`card-with-bg`:
```html
<el-card class="card-with-bg">
<!-- card content -->
</el-card>
```
2. 在你的CSS文件中或者`<style>`标签内,为这个类名设置背景图片样式,并添加额外的样式:
```css
.card-with-bg {
position: relative;
overflow: hidden;
background-image: url('your-image-url.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.card-with-bg::before {
content: "";
display: block;
padding-top: 100%; /* 设置为容器宽度的百分比,例如100% */
}
```
确保将`url('your-image-url.jpg')`替换为你实际的图片路径。
这样,背景图片将会高清显示,同时填充整个容器。通过使用伪元素`::before`和设置`padding-top`为容器宽度的百分比,可以实现让容器撑开高度以适应图片。
请注意,由于使用`background-size: contain`,图片可能无法完全填充容器的宽度或高度,但会保持高清显示。如果希望图片填满整个容器,可能需要裁剪图片或使用其他布局技术。