CSS 如何设置图片大小

在网页设计中，合理设置图片大小是一项至关重要的任务。它不仅关乎页面的美观度，还会影响网站的加载速度和用户体验。下面就来详细探讨一下使用 CSS 设置图片大小的方法。

宽度和高度属性

最基本的方式是通过 CSS 的 width 和 height 属性来直接定义图片大小。例如：

img {
    width: 200px;
    height: 150px;
}

这样就将页面中所有 img 标签的图片宽度设为 200 像素，高度设为 150 像素。需要注意的是，如果只设置一个属性，比如只设 width，图片会等比例缩放高度，以保持原有长宽比。

百分比设置

使用百分比设置图片大小可以让图片根据父元素的大小进行自适应调整。假设图片的父元素是一个宽度为 500 像素的 div 元素，若想让图片宽度占父元素宽度的 50%，高度自适应，可以这样写：

div {
    width: 500px;
}
img {
    width: 50%;
    height: auto;
}

这种方法在响应式设计中非常实用，能确保图片在不同屏幕尺寸下都能有合适的显示效果。

最大宽度和最大高度

有时候我们希望图片有一个最大的显示尺寸，以免在某些情况下图片过大而影响布局。这时候可以使用 max-width 和 max-height 属性。例如：

img {
    max-width: 100%;
    max-height: 100%;
}

这会使图片在不超过其原始尺寸的前提下，尽可能充满父元素空间。如果父元素较小，图片会自动缩小。

使用 object-fit 属性

object-fit 属性提供了更灵活的图片尺寸调整方式。它有多个取值，如 fill、contain、cover 等。

• fill：拉伸图片以填充元素的内容框，可能会导致图片变形。
• contain：保持图片的长宽比，缩放图片使其完全适应元素内容框，可能会在元素中留下空白。
• cover：同样保持长宽比，但会缩放图片以覆盖整个元素内容框，可能会裁剪部分图片。 示例代码如下：

img {
    object-fit: cover;
}

掌握这些 CSS 设置图片大小的方法，能帮助我们在网页设计中更好地控制图片的显示效果，打造出更加美观、高效的页面。无论是简单的静态页面还是复杂的响应式网站，合理运用这些技巧都能让图片发挥出最佳作用。