css 图片超出显示不出来

在网页开发中，我们常常会用到图片来装饰页面。但是，有时候图片可能会超出显示范围，显示不完整，甚至不显示。这时候，我们需要使用 CSS 来解决这个问题。

首先，让我们来看一个示例。以下是一个图片被超出了显示范围的例子：

<div class="wrapper">
  <img src="example.jpg" class="image">
</div>

.wrapper {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.image {
  width: 300px;
  height: 300px;
}

在上面的示例中，我们将包含图片的 div 容器的宽度和高度均设置为 200 像素，并将 overflow 属性设置为 hidden，以隐藏超出显示范围的部分。然而，由于图片的实际大小为 300 像素，因此图片超出了容器的范围，仍然无法完全显示。这就导致了图片显示不完整的问题。

为了解决这个问题，我们可以使用 CSS 中的 object-fit 属性。此属性可以让我们控制元素如何适应其容器的大小，并确定元素的内容是否应该被拉伸或剪切。将 object-fit 属性设置为 cover 可以让图片完全填充其容器，而不会超出或缩小到不能完全显示。

.image {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

在上面的示例中，我们将 object-fit 属性设置为 cover，以让图片完全填充其容器并保持原始宽高比。现在，无论图片的大小如何，它都能够被完全显示在容器里了。

总而言之，当图片超出显示范围时，可以使用 CSS 中的 object-fit 属性来解决这个问题。通过将属性设置为 cover，我们可以让图片完全填充其容器，并让其保持原始宽高比。