HTML/CSS에서 이미지의 일부만 표시하려면 어떻게 해야 합니까?
HTML로 250x250px 이미지의 중앙 50x50px만 표시하는 방법을 원한다고 하자 어떻게 해야 하나요?또한 css:url() 참조에 대해 이를 수행할 수 있는 방법이 있습니까?
CSS에서 클립에 대해 알고 있지만 절대 위치 지정과 함께 사용할 때만 작동하는 것 같습니다.
질문에서 언급한 것처럼 css 속성이 있지만 클리핑되는 요소는 다음과 같습니다.position: absolute;(아쉽다):
.container {
position: relative;
}
#clip {
position: absolute;
clip: rect(0, 100px, 200px, 0);
/* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}<div class="container">
<img src="http://lorempixel.com/200/200/nightlife/3" />
</div>
<div class="container">
<img id="clip" src="http://lorempixel.com/200/200/nightlife/3" />
</div>원래 답변을 보충하기 위해 - 다소 늦게 - 의 사용법을 보여주기 위해 편집 중입니다.clip-path, 지금은 deprec가 된 것을 대체했습니다.clip소유물.
그clip-pathproperty를 사용하면 다양한 옵션을 선택할 수 있습니다(원래보다 더 높음).clip), 의:
inset— 4개의 값을 'distance-from'으로 정의한 직사각형/cub 모양(top right bottom left).circle—circle(diameter at x-coordinate y-coordinate).ellipse—ellipse(x-axis-length y-axis-length at x-coordinate y-coordinate).polygon— 일련의 것들로 정의되는x/y요소의 왼쪽 상단 모서리의 원점과 관련된 좌표입니다.경로가 자동으로 닫히기 때문에 폴리곤에 대한 현실적인 최소 점 수는 3개여야 합니다. 더 적은 점(2개)이 선이 되거나 점(1개)이 됩니다.polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).url— 로컬 URL(CSS id-selector 사용) 또는 SVG를 식별하기 위한 외부 파일의 URL(파일 경로 사용)이 될 수 있지만, 아직 실험을 해보지 않았기 때문에 이점이나 주의 사항에 대한 통찰력을 제공할 수 없습니다.
div.container {
display: inline-block;
}
#rectangular {
-webkit-clip-path: inset(30px 10px 30px 10px);
clip-path: inset(30px 10px 30px 10px);
}
#circle {
-webkit-clip-path: circle(75px at 50% 50%);
clip-path: circle(75px at 50% 50%)
}
#ellipse {
-webkit-clip-path: ellipse(75px 50px at 50% 50%);
clip-path: ellipse(75px 50px at 50% 50%);
}
#polygon {
-webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}<div class="container">
<img id="control" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
<img id="rectangular" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
<img id="circle" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
<img id="ellipse" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
<img id="polygon" src="http://lorempixel.com/150/150/people/1" />
</div>참조:
-
clip clip-path(MDN).clip-path(W3C).
한 가지 방법은 용기(td, div, span 등)에 배경으로 표시할 이미지를 설정한 다음 배경 위치를 조정하여 원하는 스프라이트를 얻는 것입니다.
또 다른 방법은 다음과 같습니다. 이 경우와 같이 이미지가 컨테이너의 유일한 요소라고 가정하기 때문에 가장 깨끗하지는 않습니다.
<header class="siteHeader">
<img src="img" class="siteLogo" />
</header>
그런 다음 용기를 원하는 크기의 마스크로 사용하고 이미지를 음의 여백으로 둘러싸 올바른 위치로 이동할 수 있습니다.
.siteHeader{
width: 50px;
height: 50px;
overflow: hidden;
}
.siteHeader .siteLogo{
margin: -100px;
}
데모는 이 JSFiddle에서 볼 수 있습니다.
IE>9에서만 작동하는 것으로 보이며, 다른 모든 브라우저의 모든 중요한 버전일 수도 있습니다.
배경 위치를 조정하여 배경 영상을 다른 위치로 이동합니다.div:
div {
background-image: url('image url');
background-position: 0 -250px;
}
div{
width: 50px;
height: 50px;
background: no-repeat -100px -100px/500% url("https://qce.quantum.ieee.org/2022/wp-content/uploads/sites/6/2022/02/QCE22-250x250-website@1x.jpg")
};<html>
<head>
</head>
<body>
<div></div>
</body>
</html>저는 최근에 Codecademy를 위한 제 프로젝트 중 하나를 진행하려다 이 문제에 부딪혔습니다.이미지가 있고 사진의 일부만 표시하려면 다음 작업을 수행하여 위치를 지정할 수 있습니다.
'background-position: 95% 5%;'
자신에게 가장 적합한 것을 확인하기 위해 백분율을 가지고 장난을 칩니다.하지만 이미 배경 이미지로 표시된 경우에는 이 방법이 가능할 것으로 생각합니다.
언급URL : https://stackoverflow.com/questions/57725/how-can-i-display-just-a-portion-of-an-image-in-html-css
'programing' 카테고리의 다른 글
| 유사 TTY 할당을 위한 Docker-t 옵션에 대해 혼동함 (0) | 2023.10.24 |
|---|---|
| PlayStore Developer Console에서 '베타로 롤아웃 시작'이 비활성화됨 (0) | 2023.10.24 |
| 영어 알파벳의 어떤 글자가 픽셀을 가장 많이 차지합니까? (0) | 2023.10.24 |
| 문자열을 ASP에 게시합니다.NET Web Api 응용 프로그램 - null을 반환합니다. (0) | 2023.10.24 |
| ORA-01792: 테이블 또는 뷰의 최대 열 수는 1000개입니다. (0) | 2023.10.24 |