css

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

핑계/ editor

  • 2 comments
  • 4,283 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에서 발췌했습니다.

핑계

댓글 먹고 살아요~

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
seyoun Recent comment authors
newest oldest most voted
seyoun
Member

안녕하세요…스크립트 왕초보라 보고 했는데…크롬에서만 되었던 것이 이 소스 붙이니까 잘 되긴하지만…
제가 이미지 클릭하면 이미지를 확대 할수 있도록 하고, 클릭하면 이미지가 원본이미지가 뜰 수 있도록…했는데이건 또 그 기능은 안되더라구요…ㅠㅠ…어떡하면 익스도 되고 할 수 있을까요…참고로 크롬은 관계가 없어서 그런지 원래는 마우스 오버하면 이미지 크게확대되고, 클릭하면 원본이미지가 뜹니다…

seyoun
Member

메일 주셔서 감사합니다.

일단 http://html5around.com/wordpress/tutorials/css3-object-fit/

을 보고 적용하였으나, 익스에서 cover기능이 먹히지 않아서 맨 밑의 글(스트립트)을

적용하면 밑의 링크http://peruzen.dothome.co.kr/seyoun/처럼 되야하는데 스트립트가 있으면 그 (트렌지션과 팝업링크)기능이 익스에서 먹질 않습니다.

그래서 지금은 일단 스크립트는 처리한 상태입니다…

전 그림이 커버기능이 크롬과 익스 다 되면서 마우스오버시 (트렌지션과 팝업링크)기능이 되고 싶지만

안되서 메일 보내드렸습니다…

일단 지금은 연습이긴하지만…

http://peruzen.dothome.co.kr/seyoun/

입니다…

ps.네이버로 메일을 보냈지만 메일전송이 안되어
다시 여기에 글을 남깁니다.