이미지를 어떤 크기의 div에 테두리로 넣기

Question

나는 이미지 인 테두리를 사용하는 Wix로 제작 된 여러 웹 사이트를 보았습니다. 심상 자체는 다량이고 나는 약간 기술을 시도했다 그러나 나는 그들이 그것을 처리하는 방법 생활을 위해 알아낼 수 없다. 이것은 이미지 중 하나입니다 : http://bit.ly/1lZfHRn

콘텐츠 주위에 외부 div를 배치했지만 패딩과 여백을 사용하여 올바르게 작동하지 못했습니다.

윅스 사이트에서 볼 때 테두리는 문자 그대로 완벽하게 맞습니다. 이미지의 크기를 조정하면 가로 세로 비율과 투명도가 그대로 유지됩니다. 그러나 Wix는 국경을 더 많이 가져 왔고 투명성을 줄였습니다. 나는 그들이 정확하게 어떻게 동일한 이미지를 사용하면서 약 192 x 192의 이미지에서 이것을 어떻게 관리했는지 이해하지 못한다.

누구든지 나에게이 점을 밝힐 수 있습니까? 나는 그런 일이 어떻게 돌아가는지에 대한 일을 아는 것에 정말로 감사 할 것입니다!

Answer 1

이런 뜻입니까? FIDDLE?

배경을 선택하고 이미지를 오버레이 한 다음 이미지와 배경을 적절하게 맞춰보십시오.

CSS는

.testme { 
    width: 550px; 
    height: 400px; 
    background: url('http://i.imgur.com/YTPgXWG.jpg') no-repeat; 
    background-size: 550px 320px; 
    padding: 20px; 
} 
img { 
    display: block; 
    width: 450px; 
    height: 250px; 
    margin-left: 30px; 
    margin-top: 10px; 
}