html - 如何使用css调整html中的图像大小

Question

我正在开发一个 ionic 应用程序，我想在一些卡片中显示一些图像，问题是我的图像没有一些尺寸，我希望它们看起来有一些。

想法是使用 à css 类来解决问题(至少在宽度上)

.full-width-image {
width: 100%
}

这个类会解决尺寸问题，所有的图片都会有一定的宽度。我怎么不知道如何为他们所有人设定一个固定的高度。如果我向我的 css 类添加固定高度，例如:

.full-width-image {
width: 100%;
height: 60px; 
}

有些图片会很难看: how it looks like

我想要的是隐藏图像的额外部分。

Answer 1

如果您设置了宽度和高度，则可以使用 object-fit: cover; 让图像填满整个空间而不会丢失其纵横比。