/**
 * 响应式图片优化样式 - 简化版本
 * OSS已处理图片压缩，只需响应式显示
 */

/* 基础响应式图片 */
.responsive-img,
img.responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 缩略图响应式优化 */
.thumbnail img,
.post-img img,
.blog_widget img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* 不同屏幕尺寸的图片优化 */
@media (max-width: 480px) {
    /* 移动端：优化小屏幕显示 */
    .thumbnail img,
    .post-img img {
        max-height: 200px;
        object-fit: cover;
    }
    
    /* 首页轮播图片样式已移至 header-banner.css 统一管理 */
    
    /* 文章内容图片 */
    .post-content img {
        max-width: 100%;
        height: auto;
        margin: 10px 0;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    /* 平板端：中等屏幕优化 */
    .thumbnail img,
    .post-img img {
        max-height: 250px;
        object-fit: cover;
    }
    
    /* 首页轮播图片样式已移至 header-banner.css 统一管理 */
}

@media (min-width: 769px) {
    /* 桌面端：大屏幕优化 */
    .thumbnail img,
    .post-img img {
        max-height: 300px;
        object-fit: cover;
    }
    
    /* 首页轮播图片样式已移至 header-banner.css 统一管理 */
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* 为高分辨率屏幕提供更清晰的图片 */
    .thumbnail img,
    .post-img img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 图片悬停效果优化 */
.thumbnail:hover img,
.post-img:hover img {
    transform: scale(1.05);
}

/* 防止图片溢出 */
.post-content,
.widget-content,
.article-content {
    overflow: hidden;
}

.post-content img,
.widget-content img,
.article-content img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 图片网格布局优化 */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

@media (max-width: 480px) {
    .image-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }
}

/* 图片比例保持 */
.aspect-ratio-16-9 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 比例 */
    overflow: hidden;
}

.aspect-ratio-16-9 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aspect-ratio-4-3 {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 比例 */
    overflow: hidden;
}

.aspect-ratio-4-3 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 图片性能优化 */
img {
    /* 启用硬件加速 */
    transform: translateZ(0);
    /* 优化图片渲染 */
    image-rendering: auto;
    /* 防止图片拖拽 */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}