브라우저 확대/축소시 여백 변경

Question

썸네일 이미지와 썸네일 이미지와 겹치는 작은 이미지가 있습니다. 그러나 확대 및 축소 할 때 작은 겹치는 이미지의 경우에는 채우기가 변경되고 문제는 Chrome 브라우저에서만 발생합니다. IE와 firefox로 잘 작동합니다. 작은 이미지에 대해 채우기 값을 설정하기 위해 백분율을 사용했지만 이미지가 여전히 존재했습니다. 다음은 이미지입니다.

이

는 HTML을 인

<div class="car-item"> 
         <div class=" car-image"> 
          <img src="/~/media/images/thumb.ashx" alt="Image 1" /> 
         </div> 

          <div class="car video"> 
           <a href="#">VIDEO</a> 
          </div> 

    <div> 

차 비디오 위치는 절대 차 항목 위치 상대와 차량 이미지가 정적 인

Answer 1

백분율을 사용할 때 문제가 발생할 수 있습니다. 이것은 absolute positioning을 사용하는 좋은 예입니다.

코드가 어떻게 생겼는지 모르겠으니 여기서는 절대 위치 지정으로 위 그림을 완성하는 방법에 대한 기본 예제를 제공합니다. 추가 이미지 태그 대신 스팬 태그를 사용했지만 모두 동일해야합니다.

HTML과 CSS를 사용자 환경에서 작동 시키려면 약간 수정해야 할 수도 있습니다. 여기

http://jsfiddle.net/6C8gT/

는 업데이트 jsFiddle 마크 업 및 감소 된 마크 업 (http://jsfiddle.net/6C8gT/2/)와 다른 하나를 사용하는 (http://jsfiddle.net/6C8gT/1/)입니다. 앞으로 DIV가 필요하지 않으면 DIV가 필요하지 않습니다.

나는 방금 게시 한 내용을 수행했지만 HTML과 일치하도록 CSS를 수정했습니다. jsFiddles를 확인해야합니다.

HTML

<div class="container"> 
    <img class="thumb" src="http://lorempixel.com/300/200/" /> 
    <span>Video</span> 
</div> 

CSS

.container { 
    position: relative; 
} 
.container img { 
    display: block; 
} 
.container span { 
    color: white; 
    background-color: black; 
    padding: 5px 10px; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
}