1. **尺寸调整与填充**
使用`width`, `height`或者灵活使用相对单位如百分比 `%` 来精确设定图片大小是基础操作之一。这样既能保证不同屏幕分辨率下的适应性，又能避免加载过大的原始图导致带宽浪费：
css
img {
width: 80%; /* 图片宽度为父容器的80% */
}
2. **裁剪与定位 - object-fit 属性**
`object-fit`属性允许我们以不同的模式来缩放内容区域内的图片，例如填满整个空间 (`cover`) 或保持纵横比例并居中放置(`contain)`:
css
img {
height: 300px;
width: auto;
object-fit: cover; /* 裁切或拉伸图片使其覆盖整个区块 */
}
/* 或者 */
img {
max-width: 100%;
height: auto;
object-fit: contain; /* 在不破坏原有长宽比的前提下尽可能充满可用空间 */
}
3. **边框 & 圆角处理**
利用`border-radius`可以轻易实现圆角甚至圆形图片的设计效果：
css
img {
border-radius: 50%; /* 将图片转换成圆形 */
}
4. **背景图片应用及其特效**
我们可以通过将图片设置为某个HTML标签的 background-image ，然后结合background-size, position 和 repeat 等属性进行复杂而富有创意的呈现：
css
div.background-img {
background-image: url('yourimage.jpg');
background-position: center; /* 中心对齐 */
background-repeat: no-repeat; /* 不重复平铺 */
background-size: cover; /* 填充且可能需要截取部分图片使得完全覆盖背景区 */
}
5. **懒加载 (lazy loading)**
尽管这不是直接关于“展示”效果的内容，但借助于原生CSS新特性(配合JavaScript)，比如Intersection Observer API 可实现在滚动到可视区域内时才开始加载图片的功能，极大提升了用户体验和性能表现。
6. **响应式的图片选择**
通过对媒体查询(Media Queries)的应用，在不同视口环境下切换合适的图片资源也是现代Web设计不可或缺的一部分：
css
@media screen and (max-width: 768px){
.responsive-image{
content:url(small-image.png);
}
}
@media screen and (min-width: 769px){
.responsive-image{
content:url(large-image.png);
}
}
总之，掌握如何充分利用CSS去优化图片展示效果不仅能增强用户界面美感，还能有效提高访问速度、节省流量成本，使你的站点更具吸引力和竞争力。不断探索实践这些技术手段，无疑会使你在前端领域更加游刃有余。