CSS可用于在HTML页面内设置图像样式。图像是指使用img HTML元素包含的图像。在本文中，将介绍通过CSS的img元素设置图像样式的选项。

margin

" margin" CSS属性可让我们设置图片与相邻HTML元素之间的距离。在我有关CSS边距的教程中更详细地介绍了CSS边距。

实际上，边距是图像边框与相邻HTML元素之间的距离。如果图像没有边框，则边距将是图像边缘到相邻HTML元素之间的距离。如果图像没有填充，则空白将是图像本身与相邻HTML元素之间的距离。

边界(border)

我们可以使用borderCSS属性在图像(img元素)上设置边框。在我有关CSS边框的教程中更详细地介绍了CSS边框。

这是在图像上设置边框的示例：

img.withBorder {
    border: 1px solid #cccccc;
}

这个示例CSS规则在所有具有CSS类withBorder(<img class =" withBorder">)的img元素周围设置一个1像素的灰色边框。这是应用了上述边框样式的图像的外观：

填充(padding)

padding CSS属性设置图像与其边框之间的距离。在我有关CSS填充的教程中，更详细地介绍了填充。

这是在图像周围设置边框和边框的示例：

img.withBorderAndPadding {
    padding : 10px;
    border  : 1px solid #cccccc;
}

这是应用以下CSS样式的图像的外观：

宽度和高度

我们可以使用CSS的width和height属性来设置图片的宽度和高度。我的CSS盒子模型教程还介绍了CSS的width和height的属性。

如果我们设置的宽度和高度与图像本身的宽度和高度不同，则浏览器将放大或者缩小图像以匹配我们设置的宽度和高度。以下是一些宽度和高度的CSS示例：

img.scaledUp {
    width: 300px;
    height: 150px;
}
img.scaledDown {
    width: 300px;
    height: 150px;
}

这是应用上述样式后的图像外观。第一张图片显示了图片的自然尺寸。以下两个图像按比例放大和缩小。

保持图像宽高比

通过同时设置"宽度"和"高度"来缩放图像可能会导致图像失真，这意味着宽度和高度之间的宽高比可能会丢失。要在保留宽高比的同时缩放图像，请仅设置width或者heightCSS属性。然后，浏览器将基于所设置的宽度或者高度来计算其他纵横比(如果设置了宽度，则为高度，如果设置了高度，则为宽度)，因此将保持图像的纵横比。这是两个仅设置width和height的示例：

img.scaledUp {
    width: 300px;
}
img.scaledDown {
    height: 150px;
}

以下是渲染后图像的外观：

宽度和高度(百分比)

我们可以将" width"和" height"设置为百分比。在这种情况下，图像将获得宽度和/或者高度，这是其父HTML元素的宽度或者高度的百分比。这是一个例子：

img.percentages {
    width: 25%;
}

本示例将图像的"宽度"设置为其父HTML元素宽度的25％。如果父HTML元素按比例缩放，则图像也按比例缩放。

最大宽度和最大高度

我们可以使用max-width和max-heightCSS属性设置图片的最大宽度和高度。

如果图像使用百分比作为宽度或者高度，则设置最大宽度或者高度会很有用。如果用户最大化浏览器，也许我们不希望将图像放大以填充整个浏览器窗口(或者图像的父元素具有任何大小)。在这种情况下，设置最大宽度和高度可能会很有用。这是在图像上设置"最大宽度"的示例：

img.withMaxWidth {
    width: 100%;
    max-width: 500px;
}

这个示例CSS规则将CSS类withMaxWidth的img元素的width设置为其父元素的100％。然而，该示例将图像限制为最大宽度为" 500px"。一旦图像达到500像素的宽度，无论父元素的宽度如何，浏览器都将不再按比例放大图像。

最小宽度和最小高度

min-width和min-height CSS属性的工作方式类似于max-width和max-height CSS属性，但设置图像的最小宽度和高度(或者其所应用的任何HTML元素)除外到。

响应式图像

响应式图像是响应式网页设计的一部分，并且它们的行为相应。响应式Web设计是一种Web设计，它能够对正在查看的设备做出敏感的响应，无论该设备是手机，平板电脑，笔记本电脑，台式机还是电视。

在小屏幕上，我们可能想要显示比大屏幕小的图像。我们可能还希望限制图像的大小以适合较小的屏幕(使用max-width)。

作为我的响应式，移动友好的Web设计教程的一部分，我有一段文字专门说明了如何实现响应式图像。