.img-list img { /* float: left; */ width: 80%; height: 300px; margin-right: 1%; /* margin-bottom: 10px; */ /* object-fit: contain; -o-object-fit: contain; */ } .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 代码中使用了两个类 `.img-list img` 和 `.img-list .img` 来设置图片的样式。由于这两个类的设置几乎相同，除了 `.img` 类中使用了 `display: inline-block;` 属性来让图片水平排列，并去掉了 `background-position`、`background-repeat` 和 `background-size` 属性，因此，这两个类的设置可能会互相冲突，导致图片大小不符合预期。

建议检查 HTML 代码中，是否有同时使用了这两个类的元素，并分别给它们添加不同的类名，或者将它们的样式合并到一个类中，避免样式冲突。另外，可以尝试增加图片的宽度和高度，或者使用 `object-fit` 属性来调整图片大小。

相关问题

.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; */ 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` 和 `margin-bottom` 属性都设置为 0。