通过CSS控制图片的大小和位置相对简单，涉及到几个关键属性。以下是一些常用的方法和技巧，帮助实现所需效果。
使用`width`和`height`属性可以直接控制图片的尺寸。你可以设置像素值或百分比。例如，`width: 100px;`将图片宽度设置为100像素，而`height: auto;`保证图片比例不变。
可以通过`max-width`和`max-height`属性限制图片的最大尺寸。这在响应式设计中尤其有用。设定为`max-width: 100%;`可以确保图片在容器内不会超出边界。
CSS的`object-fit`属性允许控制图片在其容器中的显示方式。对于元素设置为`object-fit: cover;`，图片将覆盖整个容器，但可能会裁剪掉部分内容；而`object-fit: contain;`则会确保整个图片完整显示，但可能会留有空白。
调整图片位置可以使用`position`属性。通过将`position`设置为`relative`，然后使用`top`、`left`、`bottom`或`right`控制具体的位置。也可以使用`margin`和`padding`属性来调整外部和内部间距，进一步实现精准定位。
设置背景图时，`background-image`属性非常有用。结合`background-size`属性，可以设置背景图的显示方式。`background-size: cover;`会使背景图覆盖整个元素，而`background-size: contain;`则保持比例，确保完整显示图片。
在媒体查询中，根据不同的屏幕尺寸调整图片的大小和位置，可以提高用户体验。例如，在小屏幕上可以使用较小的图片尺寸，以适应屏幕宽度。
使用浮动和灵活盒子模型（Flexbox）也可以帮助布局图片。通过设置`float: left;`，图片可以与文本或其他元素并排显示。Flexbox则可以通过设置`display: flex;`和相关属性，实现更加灵活的布局方式。
CSS动画效果如`transition`和`transform`可以为图片展示增添生动感。简单的缩放或移动效果，可以吸引用户的注意力。