Обрезание необходимой части изображения с помощью CSS

-1

Так что у меня есть образ заката, который я хочу использовать в качестве своего баннера для моей веб-страницы, но я просто хочу использовать его часть, а не весь образ. Я понял, как закрепить изображение до размера, который я хочу; теперь я просто пытаюсь выяснить, как я могу изменить положение изображения, чтобы часть изображения, которую я хочу видеть, отображается в моем выбранном размере клипа. Заранее спасибо.Обрезание необходимой части изображения с помощью CSS

<html> 
 

 
<head> 
 
    <style> 
 
    #banner { 
 
     position: absolute; 
 
     display: block; 
 
     margin-left: 15%; 
 
     clip: rect(8px, 960px, 200px, 0px); 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <img id="banner" src="http://weknowyourdreams.com/images/sunset/sunset-02.jpg"> 
 
    <h1>My Travels</h1> 
 
    </header> 
 
</body> 
 

 
</html>

источник

2015-11-05 Darryl Mendonez

'clip' устарел. Используйте «клип-путь», а размеры, о которых вы указали, являются координатами для изображения. –

Вы должны обрезать изображение в редакторе изображений, за исключением случаев, когда у вас разные размеры клипа в разных разрешениях. В противном случае это будет пустой тратой полосы пропускания, временем загрузки и т. Д. _aka_ web performance – FelipeAls

Применение отсечения для элементов в CSS является clip-path

Например:

.element { clip-path: inset(10px 20px 30px 40px); /* Also can take single values to make all sides the same, or 2 values (vert/horz), or 3 values (top/horz/bottom). */ }

Codepen Пример: here.

источник

2015-11-05 13:16:51 naqushab

Обрезание необходимой части изображения с помощью CSS

ответ

Смежные вопросы