Как сделать чтобы при уменьшении div картинка внутри не сжималась?

Решение проблемы сжатия изображения внутри уменьшающегося div

Чтобы предотвратить сжатие изображения при уменьшении размеров родительского контейнера, нужно использовать комбинацию CSS-свойств, которые контролируют поведение изображения внутри ограниченного пространства.

Основные подходы и CSS-свойства

1. object-fit — ключевое свойство для контроля изображений

Свойство object-fit определяет, как содержимое (изображение или видео) должно заполнять свой контейнер. Для предотвращения сжатия наиболее полезны значения:

.container img {
    object-fit: contain; /* Сохраняет пропорции, вписывая полностью в контейнер */
    object-fit: cover;   /* Сохраняет пропорции, заполняя контейнер с обрезкой */
    object-fit: none;    /* Сохраняет оригинальные размеры, не масштабируя */
}

2. max-width и max-height для ограничения размеров

.container img {
    max-width: 100%;  /* Не больше ширины контейнера */
    max-height: 100%; /* Не больше высоты контейнера */
    width: auto;      /* Автоматическая ширина */
    height: auto;     /* Автоматическая высота */
}

Практические примеры реализации

Пример 1: Сохранение пропорций с обрезкой (cover)

<div class="image-container">
    <img src="photo.jpg" alt="Пример">
</div>

.image-container {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    overflow: hidden; /* Скрывает части изображения, выходящие за границы */
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Заполняет контейнер, сохраняя пропорции */
    object-position: center; /* Центрирует изображение */
}

Пример 2: Полное отображение без обрезки (contain)

.image-container {
    width: 300px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

.image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

Пример 3: Фиксированный размер изображения с центрированием

.image-container {
    width: 300px;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.image-container img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: none; /* Полное сохранение оригинальных размеров */
}

Дополнительные техники и соображения

Использование background-image как альтернатива

.image-container {
    width: 300px;
    height: 200px;
    background-image: url('photo.jpg');
    background-size: cover; /* или contain */
    background-position: center;
    background-repeat: no-repeat;
}

Адаптивные решения с медиа-запросами

.responsive-image {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .image-container {
        width: 100%;
        height: 300px; /* Фиксированная высота на мобильных */
    }
    
    .image-container img {
        object-fit: cover;
    }
}

JavaScript-решение для динамического контроля

function maintainImageRatio(containerSelector) {
    const containers = document.querySelectorAll(containerSelector);
    
    containers.forEach(container => {
        const img = container.querySelector('img');
        const containerRatio = container.offsetWidth / container.offsetHeight;
        const imgRatio = img.naturalWidth / img.naturalHeight;
        
        if (imgRatio > containerRatio) {
            img.style.width = '100%';
            img.style.height = 'auto';
        } else {
            img.style.width = 'auto';
            img.style.height = '100%';
        }
    });
}

// Вызов при загрузке и изменении размера окна
window.addEventListener('load', () => maintainImageRatio('.image-container'));
window.addEventListener('resize', () => maintainImageRatio('.image-container'));

Рекомендации по выбору подхода

1. Для фотографий и иллюстраций — используйте object-fit: cover с overflow: hidden
2. Для логотипов и важных элементов — object-fit: contain с фоновым цветом
3. Для точного сохранения пропорций — комбинация max-width: 100% и max-height: 100%
4. Для фоновых изображений — CSS background-size с значениями cover или contain

Поддержка браузеров и fallback-решения

Свойство object-fit поддерживается всеми современными браузерами, но для IE11 потребуется полифил или альтернативное решение:

.image-container {
    position: relative;
    width: 300px;
    height: 200px;
}

.image-container img {
    /* Для современных браузеров */
    object-fit: cover;
    
    /* Fallback для IE */
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@supports (object-fit: cover) {
    .image-container img {
        width: 100%;
        height: 100%;
        position: static;
        transform: none;
    }
}

Выбор конкретного метода зависит от требований к отображению, необходимости поддержки старых браузеров и семантической структуры HTML. Наиболее универсальным и современным решением является использование object-fit с соответствующими значениями.