Здравствуйте.
Интересует казалось бы простой вопрос.
Есть прямоугольная фотография. Но на сайте под неё отведена квадратная форма
И если сделать например <img width="250" height="250">
то мы получим сжатую по вертикали или горизонтали фотографию.
Как этого избежать?
Хотелось бы увидеть 2 реализации.
1.Что бы выбирался верхняя часть (при высокой фотографии) или левая (при широкой).
2.Что бы выбиралась центральная часть.
Гуглить не помогло.
Заранее спасибо !
3 ответа
погуглите ещё на тему background-size. Поможет.
<div class="image" style="background-image: url(photo.jpeg)"></div>
и в css:
.image {
width: 250px;
height: 250px;
background: center top no-repeat;
background-size: cover;
}
Плохо искали:
- https://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped
- http://www.squareonemd.co.uk/how-to-crop-an-image-with-a-css-class/
- http://designshack.net/articles/css/focal-point-intelligent-cropping-of-responsive-images/
- http://cssglobe.com/3-easy-and-fast-css-techniques-for-faux-image/
Попробуйте таким кодом .img { display: inline-block; width: 150px; height: 100px; overflow: hidden; background: #FFFFFF; margin-top: 5px; margin-left: 15px;
}
.img img {
width: 150px;
border: none;
margin: 0;
padding: 0;
}
Только размеры и бакграунд под себя подстройте.