css

<img>요소에 background-size: cover 효과를 낼 수 있는 object-fit: cover 알아보기

핑계/ editor

  • 0 comments
  • 3,584 views
  • 2017년 9월 15일

<img>요소에 background-size: cover 효과를 낼 수 있는
object-fit 속성에 대해 알아보아요~

이 튜토리얼은
‘background-size’ 에 관련된 글이 아닙니다.
‘background-size’ 에 관해 공부하고 싶으신 분들은
CSS3 background-size 알아보기 여기에서 공부해주세요

 

 

‘object-fit: cover’ 속성은
IE, EDGE 브라우저에서는 적용되지 않는 CSS 속성입니다.
이왕이면 ‘크롬’, ‘파이어폭스’, ‘사파리’ 브라우저에서 읽어주세요!

하지만!! 실망하지 마세요~
글 아래부분에 IE, EDGE 브라우저에도 <img>요소에 background-size: cover 효과를 낼 수 있는 방법을 적어놓았습니다!

IE, EDGE 브라우저로 접속하신 분들도 끝까지 읽어주세요 ~~

 

 

반응형 웹페이지에 이미지를 넣을 때
background 속성으로 적용하면 background-size: cover 라는 속성 때문에 어떤 사이즈의 웹페이지에서든지 이미지가 원본 비율을 유지합니다.
하지만 <img>요소로 이미지를 넣으면 이미지가 원본 비율을 유지하지 못하고 늘어지거나 줄어들게 되지요~

javascript를 잘하면 무슨 걱정이겠지만 못하는 사람에겐 희망이 사라집니다. ㅠㅠ
하지만 디자이너로써 이미지가 깨지는 꼴은 볼수가 없죠!
그래서 요기조기 인터넷을 열심히 찾아봤습니다 ~~

그런데 CSS3에 <img>요소에 ‘background-size: cover’ 효과를 낼 수 있는 속성이 있더라구요 ~~
지금부터 공유해 볼께요

 

① 이미지를 준비합니다. 기준이 될 수 있게 border를 그려볼께요~

Markup

<body>
    <img src="Shopping-Bag-new-logo.jpg" alt="쇼핑백" />
    <img src="Poster-new-logo.jpg" alt="포스터" />
</body>

CSS

img {
    border: 2px solid #ed5736;
}

HTML5AROUND on html5around.com

 

② <img>요소에 width, height 값을 지정해줍니다.

– 이미지가 변형되도 상관이 없습니다. 원하는 사이즈의 width, height 값을 지정해줍니다.

추가 CSS

img {
    border: 2px solid #ed5736;
    width: 200px;    /* 추가 */
    height: 200px;   /* 추가 */
}

HTML5AROUND on html5around.com

 

③ CSS에 ‘object-fit: cover’ 를 추가해줍니다.

– <img>요소에 ‘object-fit: cover’ 를 추가하니
   ‘background-size: cover’와 같은 효과가 나타나는 걸 볼 수 있습니다.

‘object-fit’ 을 사용하면 이미지 위치 지정도 할 수 있는데요
   ‘background-position’처럼 ‘object-position’ 이라는 속성을 추가하면 됩니다.
   ‘object-position’의 초기값은 ‘center center’ 입니다.

추가 CSS

img {
    border: 2px solid #ed5736;
    width: 200px;    
    height: 200px;   
    object-fit: cover;  /* 추가 */
}

HTML5AROUND on html5around.com

 

④ 기준선이였던 border를 지워주면 완성입니다.

최종 CSS

img {
    width: 200px;    
    height: 200px;   
    object-fit: cover;
}

HTML5AROUND on html5around.com

 

 

object-fit 의 다른속성에 대해서도 알아보아요~

object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

HTML5AROUND on html5around.com

object-fit: fill – 이미지가 강제로 늘어나거나 줄어들면서 지정한 넓이, 높이에 꽉 차게 됩니다. 원본 이미지의 비율을 유지하지 않습니다.

object-fit: contain – 원본 이미지의 비율을 유지하면서 지정한 넓이, 높이안에서 최대한 확대시킵니다. 잘리는 부분이 발생하지 않습니다.

object-fit: cover – 원본 이미지의 비율을 유지하면서 지정한 넓이, 높이에 꽉 차게 됩니다. 잘리는 부분이 발생합니다.

object-fit: none – 지정한 넓이, 높이에 상관없이 원본 이미지의 크기를 유지합니다. 원본 이미지 가운데 부분이 보여지게 됩니다.

object-fit: scale-down – 지정한 넓이, 높이값보다 원본 이미지가 작으면 그대로 두고, 크면 원본이미지 사이즈를 줄여서 보여줍니다.

더 자세한 설명은 MDN에서 찾아보세요~~

 

 

앞에서 이왕이면 이 튜토리얼을 크롬, 파이어폭스, 사파리 브라우저에서 봐달라고 언급했었는데요…

caniuse에 물어보면 위와 같이 IE, EDGE에서는 작동하지 않는 것을 볼 수 있습니다.
지금 이 튜토리얼을 보는 분들은 cover 효과를 내기위해서 이 긴긴글을 읽고 있는데 IE, EDGE 에서 작동하지 않는다고 하면.. 이 긴 글을 읽어볼 필요가 없겠죠??
제가 다 찾아봤지만 CSS로는 IE, EDGE에서 object-fit: cover 효과를 낼수가 없더라구요..

그래서.. 이 글이 CSS 튜토리얼이긴 하지만 Javascript 소스를 들고 왔습니다.;;;
이 Javascript 소스는 IE, EDGE 에서 <img>요소에 object-fit: cover 효과를 주기 위한 소스입니다.
그래서 꼭! 다른 브라우저를 위해서 CSS 에 ‘object-fit: cover’ 는 꼭 써주어야 합니다.

아래 javascript 소스를 적용하는 방법은 아주 간단합니다.
6번째 줄에 ‘classname’ 이라고 써진 부분에 cover 효과를 적용하고 싶은 <img> 를 감싸고 있는
width, height값이 지정된 <div> 의 class name만 적어주면 됩니다.
‘.(dot)’은 쓰지 않습니다.
그리고 전체 javascript 소스를 body 맨 아래쪽에 붙여주심 되요 ~~

나중에 IE, EDGE 까지 적용되는 CSS코드나, 벤더 프리픽스가 나오면 튜토리얼 업데이트 할께요 ~

<script>
// Detect objectFit support
if('objectFit' in document.documentElement.style === false) {
  
  // assign HTMLCollection with parents of images with objectFit to variable
  var container = document.getElementsByClassName('classname'); // img를 감싸고 있는 div의 class name 을 써주세요.
  
  // Loop through HTMLCollection
  for(var i = 0; i < container.length; i++) {
    
    // Asign image source to variable
    var imageSource = container[i].querySelector('img').src;
    
    // Hide image
    container[i].querySelector('img').style.display = 'none';
    
    // Add background-size: cover
    container[i].style.backgroundSize = 'cover';
    
    // Add background-image: and put image source here
    container[i].style.backgroundImage = 'url(' + imageSource + ')';
    
    // Add background-position: center center
    container[i].style.backgroundPosition = 'center center';
  }
}
else {
  // You don't have to worry
  console.log('No worries, your browser supports objectFit')
}
</script>

위 코드는 codepen.io에서 발췌했습니다.

핑계

댓글 먹고 살아요~

Leave a Reply

avatar