[DEV] CSS OBJECT-FIT과 IE에서 사용하기

headerimg

  1. Object-fit은?
  2. Object-fit을 사용할 때, IE는 어떻게 할까?
  3. 예제
  4. 원리

Object-fit은?

CSS object-fit은 컨테이너에 맞게 <img>, <video> 등의 크기를 조정하는 방법을 지정한다. 음.. 그렇구나 근데 IE는 쓰지 못한다.

Object-fit을 사용할 때, IE는 어떻게 할까?

img

나의 최대의 적 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 효과를 낸다.


© 2018. All rights reserved.