CSS 以较小的宽度显示原始图像

有时，您可能需要显示一个大图像，但它太大了以至于不适合于您的页面布局。这时，您可以使用 CSS 中的一些技巧来调整图像大小，以适应您的布局和设计。

使用 max-width 属性

通过使用 max-width 属性，您可以限制图像的最大宽度。这将使图像适应其容器的宽度，但保持其原始高度。

img {
  max-width: 100%;
}

这个 CSS 代码片段会将 img 标签的 max-width 属性设置为 100%，这意味着该图像将自动缩放以适应其容器的宽度。

使用 width 和 height 属性

您还可以使用 width 和 height 属性来设置一个固定的图像大小。但是，请注意，这可能会导致图像拉伸或失真，因此要小心使用。

img {
  width: 500px;
  height: 300px;
}

这个 CSS 代码片段会将 img 标签的 width 属性设置为 500px，height 属性设置为 300px。

避免拉伸和失真

为了避免拉伸和失真，最好使用原始图像的尺寸和比例。可以使用图像编辑软件或在线工具来调整图像大小或裁剪图像。

另外，请记住调整图像大小会增加页面加载时间，因此请确保使用适当的图像大小。

总之，通过使用 CSS 的 max-width 属性或 width 和 height 属性，您可以轻松地调整图像大小，以适合于您的布局和设计。但请注意避免拉伸和失真，并确保图像大小适当以避免增加页面加载时间。