Обрезка изображения в процентах с помощью CSS - PullRequest
Новая
       2

Обрезка изображения в процентах с помощью CSS

2 голосов
/ 13 октября 2011

Я хочу изменить размер изображения таким образом, чтобы оно занимало 100% ширины страницы и 40% ее высоты, но не искажая естественные пропорции изображения.* но я не могу заставить его работать с процентными значениями, а не только со значениями в пикселях или em.

Есть идеи, как это можно сделать?Большое спасибо.

Ответы [ 2 ]

3 голосов
/ 13 октября 2011

Вы можете использовать свойство css3 background-size для этого: 

div{
 background:url(image.jpg) no-repeat;
 -moz-background-size:100% 40%;
 -webkit-background-size:100% 40%;
 background-size:100% 40%;
}

& если вы не хотите искажать изображение, напишите так: 

div{
     background:url(image.jpg) repeat-x;
     -moz-background-size:auto 40%;
     -webkit-background-size:auto 40%;
     background-size:auto 40%;
    }
1 голос
/ 14 октября 2011

Казалось бы, это работает лучше: 

div{
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 40%;
 background:url(images/background.jpg) no-repeat;
 -moz-background-size:100% auto;
 -webkit-background-size:100% auto;
 background-size:100% auto;
}

Но большое спасибо за то, что направили меня в нужное место!

...