[DEV] CSS OBJECT-FIT과 IE에서 사용하기
Object-fit은?
CSS object-fit은 컨테이너에 맞게 <img>, <video> 등의 크기를 조정하는 방법을 지정한다. 음.. 그렇구나 근데 IE는 쓰지 못한다.
Object-fit을 사용할 때, IE는 어떻게 할까?
나의 최대의 적 IE에서는 이렇게 간편하고 좋은 css 속성을 쓰지 못한다.
CSS에서 이미지를 사이즈에 맞게 맞춰준다. 이해하기 쉽도록 간단한 예제를 만들었는데 눈으로 직접 보면 설명이 될 것이다.
예제
For IE는 object-fit에서 가장 많이 사용하는 cover와 같이 만들었다.
처음은 ‘none’으로 시작함. 요즘 하고있는 게임
카타나 제로이미지를 이용함.
원리
편의상 jquery로 작성함.
<!-- for IE 버튼 부분 -->
<div class = "button-wrap last button-IE">
<button class = "rad-button">for IE</button>
</div>
<!-- 이미지가 들어있는 컨테이너 및 이미지 태그 -->
<div class="img-container">
<img class="target" src="https://bit.ly/2GZUits">
</div>
function forIE(){
var t = $('.target'), // 이미지 태그
s = 'url(' + t.attr('src') + ')', // 이미지 태그의 src를 가져옴.
p = t.parent(), // 부모 컨테이너 '.img-container'
d = $('<div class="backGround"></div>'); // div를 하나 만듦.
t.hide(); //이미지는 숨기고.
p.append(d); //부모div에 생성한 div를 붙임.
d.css({
'height' : 300,
'background-size' : 'cover',
'background-repeat' : 'no-repeat',
'background-position' : 'center',
'background-image' : s ,
'border' : '1px solid red'
});
}
위에 css 코드가
object-fit:cover효과를 낸다.