8,957
edits
MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 121: | Line 121: | ||
/*photo frames */ | /*photo frames */ | ||
/* Стиль для контейнера изображения с рамкой и подписью */ | /* Стиль для контейнера изображения с рамкой и подписью */ | ||
.photo-frame { | .photo-frame { | ||
display: inline-block; /* Для корректного центрирования и отображения */ | display: inline-block; /* Для корректного центрирования и отображения */ | ||
text-align: center; /* Центрирование подписи */ | text-align: center; /* Центрирование подписи */ | ||
margin: 10px; /* | margin: 10px; /* Отступ для визуального разделения */ | ||
padding: 10px; /* Внутренний отступ, чтобы рамка не обрезала фото */ | padding: 10px; /* Внутренний отступ, чтобы рамка не обрезала фото */ | ||
vertical-align: top; /* Выравнивание по верхнему краю */ | vertical-align: top; /* Выравнивание по верхнему краю */ | ||
| Line 152: | Line 151: | ||
border-width: 20px 40px; /* Верх/низ: 20px, лево/право: 40px */ | border-width: 20px 40px; /* Верх/низ: 20px, лево/право: 40px */ | ||
display: block; /* Убирает лишние отступы под изображением */ | display: block; /* Убирает лишние отступы под изображением */ | ||
width: | max-width: 100%; /* Изображение не выходит за контейнер */ | ||
height: | height: auto; /* Сохраняет пропорции изображения */ | ||
object-fit: | object-fit: contain; /* Изображение не обрезается, а вписывается целиком */ | ||
box-sizing: border-box; /* Рамка включается в размеры изображения */ | |||
transition: all 0.3s ease; /* Плавный переход для всех изменений */ | transition: all 0.3s ease; /* Плавный переход для всех изменений */ | ||
} | } | ||
| Line 160: | Line 160: | ||
/* Эффект при наведении */ | /* Эффект при наведении */ | ||
.photo-frame img:hover { | .photo-frame img:hover { | ||
border-width: 23px 47px; /* | border-width: 23px 47px; /* Увеличиваем рамку при наведении */ | ||
transform: scale(1.05); /* Увеличение изображения на 5% */ | transform: scale(1.05); /* Увеличение изображения на 5% */ | ||
} | } | ||