在网页设计中，CSS（层叠样式表）是一种用于控制网页元素样式的语言，通过CSS，我们可以轻松地调用和设置HTML中的图片样式，本文将详细介绍如何使用CSS来调用HTML中的图片，并提供一些实用的技巧。
我们需要了解HTML中的图片是如何表示的，在HTML中，我们通常使用<img>标签来嵌入图片，并通过src属性指定图片的路径。
<img src="image.jpg" alt="描述文字">
接下来，我们可以通过CSS来控制这张图片的样式，有多种方式可以实现这一点：
1、内联样式：直接在HTML元素的style属性中写入CSS代码，这种方式适用于单个元素的样式设置。
```html
<img src="image.jpg" alt="描述文字" style="width: 300px; height: 200px;">
```
2、内部样式表：在HTML文档的<head>部分使用<style>标签定义CSS规则，这种方式适用于整个页面的样式设置。
```html
<head>
<style>
img {
width: 300px;
height: 200px;
}
</style>
</head>
```
3、外部样式表：将CSS规则写入一个单独的.css文件中，并通过<link>标签引入到HTML文档中，这种方式适用于多个页面共享相同样式的情况。
```html
<head>
<link rel="stylesheet" href="styles.css">
</head>
```
在styles.css文件中，我们可以定义如下规则：
```css
img {
width: 300px;
height: 200px;
}
```
CSS还提供了一些实用的属性来控制图片的显示效果，如border、border-radius、box-shadow等，通过合理运用这些属性，我们可以为图片添加边框、圆角效果或阴影效果，从而提升网页的视觉效果。
常见问题与解答：
Q1: 如何让图片自适应容器大小？
A1: 可以使用object-fit属性来控制图片的缩放方式。object-fit: cover;会让图片保持宽高比并覆盖整个容器，超出部分会被裁剪。
Q2: 如何为图片添加圆角效果？
A2: 可以使用border-radius属性来为图片添加圆角效果。border-radius: 10px;会给图片的四个角添加10像素的圆角。
Q3: 如何让图片具有阴影效果？
A3: 可以使用box-shadow属性来为图片添加阴影效果。box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);会给图片添加一个水平偏移为2像素、垂直偏移为2像素、模糊半径为5像素的阴影，阴影颜色为半透明的黑色。