/**
* Image Handler CSS
* 
* This file provides responsive image handling for the VW Anhui website
* It ensures images are properly displayed across different screen sizes
* and automatically handles oversized images
*/
 
/* Base styles for divider-area-img */
.divider-area-img {
    overflow: hidden;
    position: relative;
}
 
.divider-area-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 维持纵横比同时填充容器 */
    object-position: center; /* 图片在容器内居中 */
    transition: transform 0.3s ease; /* 悬停效果的平滑过渡 */
}
 
/* 可选的悬停效果 */
.divider-area-img:hover img {
    transform: scale(1.02);
}
 
/* 为不支持 object-fit 的浏览器提供回退方案 */
@supports not (object-fit: cover) {
    .divider-area-img {
        background-size: cover;
        background-position: center;
    }
    .divider-area-img img {
        opacity: 0; /* 隐藏图片 */
    }
}
 
/* 响应式样式 */
@media screen and (min-width: 1001px) {
    /* 桌面样式 */
    .divider-area-img {
        /* 保持 main-3.css 中的原始尺寸 */
        width: 847px;
        height: 251px;
    }
}
 
@media screen and (max-width: 1000px) and (min-width: 769px) {
    /* 平板样式 */
    .divider-area-img {
        width: 100%;
        height: 180px;
    }
}
 
@media screen and (max-width: 768px) {
    /* 移动设备样式 */
    .divider-area-img {
        width: 100%;
        height: 120px;
    }
    /* 对于非常小的屏幕，进一步调整高度 */
    @media screen and (max-width: 480px) {
        .divider-area-img {
            height: 100px;
        }
    }
}
 
/* 可在整个网站使用的额外图片处理类 */
.responsive-img-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}
 
.responsive-img-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
 
/* 用于维持宽高比的类 */
.aspect-ratio-16-9 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 宽高比 */
    height: 0;
    overflow: hidden;
}
 
.aspect-ratio-16-9 img,
.aspect-ratio-16-9 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
/* 用于正方形图片的类 */
.aspect-ratio-1-1 {
    position: relative;
    padding-bottom: 100%; /* 1:1 宽高比 */
    height: 0;
    overflow: hidden;
}
 
.aspect-ratio-1-1 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}