Встречается на собеседованиях • сегодня
Как сделать чтобы при уменьшении div картинка внутри не сжималась
Используй min-width и min-height для изображения внутри div. Это предотвратит сжатие картинки при уменьшении контейнера.
css
.container {
width: 100%;
height: 200px;
overflow: hidden; /* Обрезать лишнее */
}
.container img {
min-width: 100%;
min-height: 100%;
object-fit: cover; /* Сохранить пропорции и заполнить контейнер */
}
text
**Варианты `object-fit`:**
- `cover` – заполняет контейнер, обрезая лишнее
- `contain` – вписывает целиком, сохраняя пропорции
- `none` – сохраняет исходный размер, может выходить за границы
Если нужно запретить уменьшение вообще, задай фиксированные размеры:
```css
img {
width: 300px;
height: 200px;
flex-shrink: 0; /* Если внутри flex-контейнера */
}
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
офферы быстрее!
Попробовать бесплатно
Следующий вопрос
Это единственный вопрос по вашему фильтру
как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы