.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代码产生的图片被压缩了，并且有留白

可能是因为你设置了图片的高度为固定的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; */ 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属性也可以控制图片的显示大小。

.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代码输出的图片太小了

可以尝试将 `.img-list .img` 的宽度调大，比如设置为 `width: 90%;` 或者 `width: 100%;`，同时也可以将高度调大，比如设置为 `height: 400px;` 或者 `height: 500px;`。另外，如果图片的尺寸本身就很小，也会导致展示出来的效果不够好，这时可以尝试使用更大尺寸的图片。