Фото різних розмірів, як зробити через css, що б певна область фото покази
Роблю гарний висновок фото, всі знають що фото різні, витягнуті по вертикалі або по горизонталі або взагалі квадратні.
Сайт на Кохані, жопустім завантажуємо ми фото, все загрузилось, вставити сам висновок фото можна змінити через css, але якщо .class img задати розміри фотке то вона буде спотворюватися, що не є добре.
Як можна реалізувати ось так, та частина що прозора пріячіться. і показуємо определнную частина яка задана через css за розмірами width: 366px; height: 250px;
Читати що багато є варіантів.
Я реалізував так:
у самих фото розмір сторін не нижче ніж 500px, тобто жодна сторона не нижче ніж 500px
apartfoto border: 1px solid #FFDDEF;
width: 366px;
height: 250px;
overflow: hidden;
margin: 10px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-html-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
>
apartfoto img<
width: 366px;
height: 250px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-html-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
>
HTML
style = "background: url (.) center center">
center - показує центр фотографії заданим за параметрами
width: 366px;
height: 250px;
а сама фотка 500px на 600px або 500px на 500px
все відмінно працює, але є одне але, не вказує фото в Фаерфокс, в опері є, в ie є, в хромі є.
Як все це виглядає:
Може як то по іншому можна реалізувати завдання?
Ось ще варіант, але працює не рівно по центру і мінус в тому що бордер закруглені краю не працює.
варіант з центрування
.apartfoto width: 366px;
height: 250px;
overflow: hidden;
border: 1px solid #FFDDEF;
margin: 10px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-html-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
>
.apartfoto img top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -100px;
max-width: 500px;
max-height: 500px;
>