그림을위한 프레임을 생성하십시오.

Question

저는 갤러리를 만들고, 그림 주위에 프레임을 만들고 싶습니다.

하지만이 그림은 확장 가능해야합니다. 이미지의 너비와 높이로 생성 된이 프레임의 너비와 높이입니다.

JavaScript를 통해 프레임 높이를 변경할 수 있어야합니다.

감사합니다.

PS : 먼저 JavaScript를 통해 프레임을 좁힐 수 있어야합니다.

Answer 1

이것은 매우 어려울 수 있습니다. 당신이 8 개 이미지 (4 개 모서리, 4면) 측면을 만들어야합니다 그렇지 않으면 CANVAS Demo

:

당신이 캔버스를 지원하는 최신 브라우저를 사용하는 경우, 당신이 찾고있는 것을 않는이 데모를 체크 아웃 당신이 원하는 크기로 조정할 수있는 타일로 만들 수 있습니다.

다음 트릭은 프레임을 만드는 방법입니다. 이 영향을 만들기 위해 사진 주위에 DIV/테이블을 손으로 만들 수는 있지만 매우 부피가 크고 깨끗하지는 않습니다. 가장 좋은 방법은 CSS 클래스 (예 : "fancyFrame")로 페이지의 모든 이미지에 연결하고 위에 작성한 이미지를 사용하는 HTML 마크 업과 함께 필요에 따라 jQuery (또는 좋아하는 lib)를 사용하여 포장하는 것입니다. CSS를 통해.

Answer 2

CSS 및 PNG를 사용하는 A List Apart's Drop Shadow technique을 사용하면 이미지의 크기를 자동 조정할 수있는 그림자를 만들 수 있습니다. 기술을 수정하여 크기를 조정할 수있는 프레임을 만들 수 있습니다.

네 개의 div와 네 개의 이미지가 필요합니다. 모서리는 투명도가 45도 각도로 절단되어야합니다.

• 이미지 1 - 프레임의 왼쪽 위 모서리와 위쪽 및 왼쪽 모서리.
• 이미지 2 - 프레임의 오른쪽 상단과 오른쪽.
• 이미지 3 - 하단 왼쪽 모서리와 프레임
• 이미지 4의 하단 - 자바 스크립트와 프레임을 좁 프레임

Answer 3

의 오른쪽 하단 정말 쉬운 부분입니다. 이미 당신은 그냥 같은 자바 스크립트와 폭을 설정할 수 있습니다 확장 할 수 있도록 당신이 당신의 HTML/CSS를 설정 한 후 : 내가 당신이라면

var photo = document.getElementById('photoFrame'); 
photo.width = '200px'; 

Answer 4

내가 (반복) 이미지를 재사용 할 수 있는지 확인 것이고, 나는 그런 식으로 그것을 할 것입니다 :

<div id="frame"> 
    <div id="top-left"></div> 
    <div id="top"></div> 
    <div id="top-right"></div> 

    <div id="left"></div> 
    <div id="imageSpace"></div> 
    <div id="right"></div> 

    <div id="bottom-left"></div> 
    <div id="bottom"></div> 
    <div id="bottom-right"></div> 
</div> 

을 여기서 #top-left, #top-right, #bottom-left, #bottom-right가 배경으로 코너의 이미지를 사용하여 두 width 및 height 세트가 있습니다.

그리고 #top, #right, #bottom, #left은 배경에 반복 이미지를 사용하고 있습니다.

원본 프레임 이미지를 자르려고하는 선을 어디에 붙이는 지 확인하십시오.

이 방법을 사용하면 #top/#bottom 및 #left/#right 너비를 변경하여 프레임 크기를 늘릴 수 있습니다.

Answer 5

재미, 나는 내가 ImageKind.com에서 일할 때이 정확한 일을했다. 참고로 프레임 가게 (예 : this one)로 이동 한 경우 4 단계 (매트 추가)로 이동하여 너비 조정을 클릭하면 설명하는 내용을 더 많이 또는 적게하는 슬라이더가 있습니다.

나는 원래 배경 이미지로 큰 반대 L 자형 프레임 조각이있는 중첩 된 DIV 몇 개가 있습니다. 약간의 방화범이 끌리는 조사 결과, 그들이 테이블로 바뀌 었음을 보여줍니다. 사이드 피스가 타일링 할 수 있으므로 더욱 효율적입니다.