HTML/CSS 다른 이미지로 감싸는 방법 (Liquid Layout)?

Question

포트폴리오의 경우 프리젠 테이션을 위해 모든 이미지를 컴퓨터 이미지로 래핑해야합니다. 나는 이미지 포장이 예제 같은 것을 사용하려고 해요 :

을

누구나 아이디어를 가지고 유체 크기 (높이 & 퍼센트 폭), 그래서 너무 래퍼가 있어야합니다

이미지 .. 그 방법을 달성하는 방법에 대해?

크로스 브라우저 방식으로 할 방법이 있습니까?

Answer 1

이미지를 <div>의 background-image으로 추가하고 두 번째 div를 다른 배경 이미지와 추가하십시오.

좋아 :

<div class="laptop-bg"> 
    <div class="laptop-content-bg"></div> 
</div> 

.laptop-bg 
{ 
    background-image:url(...); 
    background-repeat: no-repeat; 
    width:100%; 
    background-size: contain; 
    background-clip: border-box; 
    position:relative; 
} 

.laptop-bg > .laptop-content-bg 
{ 
    background-image: url(...); 
    background-repeat: no-repeat; 
    position: absolute; 
    /* % to outer border */ 
    left: 6%; 
    top: 6%; 
    bottom: 6%; 
    right: 6%; 
} 

업데이트 : 나는 rezising에 내부 spaceing에 대해 생각하지 않았다. 콘텐츠와 외부 사이의 거리를 백분율로 추정해야합니다.

는

업데이트 :

당신이 할 수있는 가장 좋은 방법은 문서에 <img>로 배경 이미지를 추가하는 것입니다. 배경 그래픽이 아닙니다. 이것은 내부 사업부 배치 할 캔버스 될 것입니다 :

<div class="laptop-bg"> 
    <div class="laptop-content-bg"> 
    </div> 
    <img src="http://i.stack.imgur.com/uS7Xm.png" /> 
</div> 

CSS를

/* Like pointed out by @Pio, you should add a max-width*/ 
    .laptop-bg 
    { 
     max-width: 1000px; 
    } 


.laptop-bg img 
{ 
    max-width: 100%; 
} 

.laptop-bg > .laptop-content-bg 
{ 
    /* background-image(url:...); */ 
    background-color:blue; 
    background-repeat: no-repeat; 
    position: absolute; 
    /* % to outer border */ 
    left:17.5%; 
    top: 17%; 
    bottom: 22%; 
    right: 18.5%; 
} 

근무 바이올린 : 내가 당신이라면 http://jsfiddle.net/Kq7ym/3/

Answer 2

내가 이런 식으로 따를 것입니다 :

1) 랩톱 모니터와 같은 div 만들기 - 두꺼운 검은 색 테두리가있는 div와 왼쪽 위와 오른쪽 위의 둥근 테두리 + 2 개의 요소 (녹색 점과 반사)로 CSS로 만들거나 im을 사용할 수 있습니다. 나이.

2) 노트북의 하단 부분을 만듭니다. - 또한 둥근 div + shadow + cavity