.list-container li .img-list { width: 100%; margin-top: 10px; /* position: relative; */ } ul{ list-style-type: none ; } .img-list .img { /* float: left; */ height: 300px; margin-right: 0; /* margin-bottom: 10px; */ display: block; /* background-position: center; */ background-repeat: no-repeat; background-size: contain; }css代码产生的图片被压缩了,并且有留白
时间: 2024-02-14 12:18:23 浏览: 32
可能是因为你设置了图片的高度为固定的300px,但是图片的实际高度可能小于300px,导致图片被压缩,并且在下方留有留白。你可以尝试将高度设置为最大值,即max-height: 300px;,同时将background-size设置为cover,这样可以保持图片的比例,同时填充整个容器,避免留白。例如:
```
.img-list .img {
max-height: 300px;
margin-right: 0;
display: block;
background-repeat: no-repeat;
background-size: cover;
}
```
相关问题
.list-container li .img-list { width: 100%; margin-top: 10px; /* position: relative; / } ul{ list-style-type: none ; } .img-list .img { / float: left; / height: 300px; margin-right: 1%; / margin-bottom: 10px; / display: block; / background-position: center; */ background-repeat: no-repeat; background-size: contain; }这段css代码输出的图片被压缩了,旁边有留白
这段 CSS 代码中的问题在于 `.img-list .img` 的 `background-size` 属性被设置为 `contain`,这会导致图片被缩放并留白。如果您希望图片充满容器而不留白,您可以将 `background-size` 属性设置为 `cover`,这会将图片缩放到完全覆盖容器,并保持其纵横比例。另外,如果您希望图片之间没有间隙,可以将 `.img-list .img` 的 `margin-right` 属性设置为 0。最终的 CSS 代码可能看起来像这样:
```
.list-container li .img-list {
width: 100%;
margin-top: 10px;
}
ul {
list-style-type: none;
}
.img-list .img {
height: 300px;
margin-right: 0;
margin-bottom: 10px;
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
```
.list-container li .img-list { width: 100%; margin-top: 10px; /* position: relative; */ } ul{ list-style-type: none ; } .img-list .img { /* float: left; */ width: 80%; height: 300px; margin-right: 1%; /* margin-bottom: 10px; */ display: inline-block; /* background-position: center; */ background-repeat: no-repeat; /* background-size: contain; */ /* object-fit: contain; -o-object-fit: contain; */ }这段css代码输出的图片很小
这段CSS代码中设置了图片的宽度为80%,高度为300px,同时设置了图片的显示方式为inline-block,所以图片显示的大小会根据其父元素的宽度进行自适应缩放。如果想要图片显示的更大,可以尝试增加图片的宽度和高度,并且设置图片的显示方式为block。另外,通过设置background-size或者使用object-fit属性也可以控制图片的显示大小。