배경 크기를 에뮬레이트하는 방법 : 커버

배경 크기를 에뮬레이트하는 방법 : 커버 ?

---

background-size: cover작동 방식 과 유사하게 전체 상자를 덮는 방식으로 상자 내부의 이미지 크기를 조정하고 위치를 변경하려면 어떻게해야합니까 ?

<div class="box" style="width: 100px; height: 100px;">
  <img src="pic.jpg" width="413" height="325">
</div>

나는 overflow:hidden상자 에 추가 해야하고 이미지가 필요하다는 것을 안다 position: absolute. 그러나 이미지에 적합한 새로운 크기와 왼쪽 + 상단 위치를 얻는 공식은 무엇입니까?

---

이것은 더 쉬울 수 있습니다

jQuery

$('.box').each(function() {
    //set size
    var th = $(this).height(),//box height
        tw = $(this).width(),//box width
        im = $(this).children('img'),//image
        ih = im.height(),//inital image height
        iw = im.width();//initial image width
    if (ih>iw) {//if portrait
        im.addClass('ww').removeClass('wh');//set width 100%
    } else {//if landscape
        im.addClass('wh').removeClass('ww');//set height 100%
    }
    //set offset
    var nh = im.height(),//new image height
        nw = im.width(),//new image width
        hd = (nh-th)/2,//half dif img/box height
        wd = (nw-tw)/2;//half dif img/box width
    if (nh<nw) {//if portrait
        im.css({marginLeft: '-'+wd+'px', marginTop: 0});//offset left
    } else {//if landscape
        im.css({marginTop: '-'+hd+'px', marginLeft: 0});//offset top
    }
});

CSS

.box{height:100px;width:100px;overflow:hidden}
.wh{height:100%!important}
.ww{width:100%!important}

이것은 모든 크기 / 방향을 처리해야하며 크기를 조정할뿐만 아니라 이미지를 오프셋합니다. 모든 것이 relative없거나 absolute배치 되지 않았습니다.

바이올린을 만들었습니다 : http://jsfiddle.net/filever10/W8aLN/

---

가치있는 일 : 이제 CSS만으로도이 작업을 수행 할 수 있습니다.

새로운 CSS 속성 object-fit ( 현재 브라우저 지원 )

그냥 설정 object-fit: cover;온img

당신도 포장 할 필요가 없습니다 imgA의 div!

깡깡이

img {
  width: 100px;
  height: 100px;
}
.object-fit {
  display: block;
  object-fit: cover;
}
.original {
  width: auto;
  height: auto;
  display: block;
}

<img src="http://lorempixel.com/413/325/food" width="413" height="325">
<p>Img 'squashed' - not good</p>
<img class="object-fit" src="http://lorempixel.com/413/325/food" width="413" height="325">
<p>object-fit: cover -
   The whole image is scaled down or expanded till it fills the box completely, the aspect ratio is maintained. This normally results in only part of the image being visible. </p>
<img class="original" src="http://lorempixel.com/413/325/food" width="413" height="325">
<p>Original ing</p>

이 웹 플랫폼 기사 에서이 새로운 속성에 대해 자세히 알아볼 수 있습니다 .

또한 속성 의 모든 값을 보여주는 위 기사 의 바이올린 이 object-fit있습니다.

---

매우 우수한 브라우저 지원 (IE8 +)과 함께 img 태그를 사용하여 배경 크기 커버 시뮬레이션을위한 충분히 가깝고 순수한 CSS 솔루션 :

.container {

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  overflow: hidden;

}

.container img {

  position: absolute;
  top: 50%;
  left: 50%;

  width: auto;
  height: auto;

  max-height: none;
  max-width: none;

  min-height: 100%;
  min-width: 100%;

  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);

}

<div class="container">
  <img src="//lorempixel.com/400/200/sports/1/" />
</div>

---

또한 가치가있는 경우 "너비"와 "높이"를 설정하는 대신 동일한 효과를 생성 할 수 있습니다 (이를 설정하면이 접근 방식을 깨뜨릴 수 있음).

min-width: 100%; min-height: 100%;

또는

min-width: (your desired percent of viewport width)vw; min-height: (your desired percent of viewport height)vh;

와

overflow: hidden;

부모에

:)

---

아이디어는 이미지에 대한 추가 래퍼를 만드는 것입니다.

<div class="wrap">
  <div class="inner">
    <img src="http://placehold.it/350x150">
  </div>
</div>

그리고 이러한 CSS를 사용하십시오.

.wrap {
  position: relative;
  width: 100%;
  height: 200px;
  background: rgba(255, 0, 0, 0.3);
  overflow: hidden;
}

.inner {
  position: absolute;
  min-width: 100%;
  height: 100%;
  left: 50%;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.inner img {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

이것은 작동하는 예입니다 : https://jsfiddle.net/kr60jroe/

---

에서 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size :

cover
    This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

그래서, 당신은 부모 안에 겹치는 부분을 만들 width: 100%거나 만드는 것을보고 height: 100%있습니다 div. 따라서 다음 논리를 사용할 수 있습니다.

var makeBackgroundCover = function (div) {
    $(div + " img").css("height", "100%");
    if ($(div + " img").width() < $(div).width()) {
        $(div + " img").css({
            "height": "auto",
            "width": "100%"
        });
    }
}

다음 바이올린은 수평 및 수직 이미지 모두에서 작동하는이 기능을 보여줍니다.

http://jsfiddle.net/2r5Cb/

---

내 접근 방식은 다음과 같습니다.

//collect the nodes
var parent = $('.box');
var img = $('image', box);

//remove width and height attributes
img.removeAttr('width');
img.removeAttr('height');

//set initial width
img.attr('width', parent.width());

//if it's not enough, increase the width according to the height difference
if (img.height() < parent.height()) {
    img.css('width', img.width() * parent.height() / img.height());
}

//position the image in the center
img.css({
    left: parseInt((img.width() - parent.width())/-2) + 'px',
    top: parseInt((img.height() - parent.height())/-2) + 'px'
});

깡깡이

---

받아 들여진 대답을 읽는 동안 이미지가 '세로'인지 '가로'인지 테스트하기 만하면됩니다.

   if (ih>iw) {//if portrait

OP의 경우 맞습니다. 그러나 다른 사람들은 직사각형을 다룰 수 있으며 컨테이너와 '하위'이미지의 종횡비를 고려해야합니다.

    var int_container_width  = parseInt( $_container.width()  );
    var int_container_height = parseInt( $_container.height() );
    var num_container_aspect = int_container_width/int_container_height;

    var int_image_width      = parseInt( $_image.width() );
    var int_image_height     = parseInt( $_image.height());
    var num_image_aspect     = int_image_width/int_image_height;

    if ( num_image_aspect > num_container_aspect){
      num_scale = int_container_width/int_image_width * 100;
    } else {
      num_scale = int_container_height/int_image_height * 100;
    }

---

이것은 순수한 CSS 솔루션입니다. 다음을 사용하여 래퍼를 정의 할 수 있습니다.

div.cover {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

및 img :

img.cover {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
  overflow-x: hidden;
}

다음은 실제 예입니다.

http://codepen.io/ErwanHesry/pen/JcvCw

---

이 스타일을 이미지 태그에 사용할 수 있습니다. "object-fit : cover;" 이 링크는 https://css-tricks.com/almanac/properties/o/object-fit/ 도 지원합니다.

---

다음은이를 수행하는 깨끗한 JavaScript 함수와 구현의 예입니다.

function backgroundCover(elementSizes, containerSizes) {
    var elementRatio = elementSizes.width / elementSizes.height,
        containerRatio = containerSizes.width / containerSizes.height;
        width = null,
        height = null;
    if (containerRatio > elementRatio) {
        width = Math.ceil( containerSizes.width );
        height = Math.ceil( containerSizes.width / elementRatio );
    } else {
        width = Math.ceil( containerSizes.height * elementRatio );
        height = Math.ceil( containerSizes.height );
    }
    return { width, height };
}

다음은 구현의 예입니다.

HTML

<!-- Make sure the img has width and height attributes. The original image's width and height need to be set in order to calculate the scale ratio. -->
<div class="photo"><img src="photo.jpg" width="400" height="300"></div>

CSS

.photo {
    position: relative;
    overflow: hidden;
    width: 200px;
    padding-bottom: 75%; /* CSS technique to give this element a 4:3 ratio. */
}
.photo img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

자바 스크립트

$( window ).on( 'resize', function() {
    $( '.cover-photo' ).each( function() {
        var img = $( 'img', this ),
            imgWidth = img.attr( 'width' ),
            imgHeight = img.attr( 'height' ),
            containerWidth = $( this ).width(),
            containerHeight = $( this ).height(),
            newSizes = backgroundCover( { width: imgWidth, height: imgHeight }, { width: containerWidth, height: containerHeight } );
        img.css( {
            width: newSizes.width,
            height: newSizes.height
        } );
    } );
} );

---

이미지 크기를 조정하지 않고 이미지를 상자 중앙에 배치하려면 다음 코드를 사용하십시오.

.box {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
}
.box img {
    width: 413px;
    height: 325px;
    position: absolute;
    left: 50%;
    top: 50%;
}

이미지 크기를 조정하려면 다음 코드를 사용하십시오.

.box {
    width: 100px;
    height: 100px;
}
.box img {
    width: 100%;
    height: auto;
}

이 코드는 이미지가 높이보다 넓은 경우 약간의 공백을 남깁니다. 둘 다 작동하지 않으면 이미지를 배경으로 설정하고 background-size: cover;.

---

가로, 세로, 직사각형, 정사각형 등의 이미지와 임의의 컨테이너 크기로 작동하는 솔루션을 찾고있는 오늘처럼이 답변을 접하는 모든 사람을 위해 아래에 내 코드를 포함했습니다.

이것은 또한 반응 적으로 작동하므로 창 크기가 조정될 때마다 다시 실행하면됩니다.

JSFiddle :

http://jsfiddle.net/66c43ao1/

HTML

<div class="test">
    <div class="cover">
        <img src="http://d2ws0xxnnorfdo.cloudfront.net/character/meme/cool-dog.jpg" width="590" height="590"/>
    </div>
</div>

CSS

/* modify the width and height below to demonstrate coverage */
.test {
    height: 300px;
    position: relative;
    width: 500px;
}
/* you will need the below styles */
.cover {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

JS

$('.cover').each(function() {
    var containerHeight = $(this).height(),
        containerWidth  = $(this).width(),
        image           = $(this).children('img'),
        imageHeight     = image.attr('height'),
        imageWidth      = image.attr('width'),
        newHeight       = imageHeight,
        newWidth        = imageWidth;

    if (imageWidth < containerWidth) {
        // if the image isn't wide enough to cover the space, scale the width
        newWidth        = containerWidth;
        newHeight       = imageHeight * newWidth/imageWidth;
    }
    if (imageHeight < containerHeight) {
        // if the image isn't tall enough to cover the space, scale the height
        newHeight       = containerHeight;
        newWidth        = imageWidth * newHeight/imageHeight;
    }

    var marginLeft      = (newWidth - containerWidth)/2;
    var marginTop       = (newHeight - containerHeight)/2;

    image.css({
        marginLeft  : '-' + marginLeft + 'px',
        marginTop   : '-' + marginTop + 'px',
        height      : newHeight,
        width       : newWidth
    });
});

물론 동일한 작업을 수행하는 Backstretch와 같은 라이브러리를 사용할 수 있지만이 솔루션이 내 목적에 더 적합하다는 것을 알았습니다 (종속성 증가, 무게 감소 등).

---

I created a function below that should do it. I borrowed some of the logic from the accepted answer and adjusted it to work with any container by creating a ratio for image dimension : container dimension and then compared which is greater to figure which dimension to adjust. Also added a 'center' argument ('true' centers, false sets it to top/left).

I'm using CSS3 with the translateX/Y, but could get it working without it easily enough.

Here's the code:

var coverImage = function(wrap, center) {

  if (typeof center === 'undefined') {
    center = true;
  }

    var wr = $(wrap),
        wrw = wr.width(),
        wrh = wr.height();

  var im = wr.children('img'),
        imw = im.width(),
        imh = im.height();

  var wratio = wrw / imw;
    var hratio = wrh / imh;

  //Set required CSS
  wr.css({'overflow' : 'hidden'});
  im.css({'position' : 'relative'});


  if (wratio > hratio) {
    im.width(wrw);
    im.css({'height' : 'auto'});

    if (center) {
      im.css({
        'top' : '50%',
        'transform' : 'translateY(-50%)'
      });
    }
  } else {
    im.height(wrh);
    im.css({'width' : 'auto'});

    if (center) {
      im.css({
        'left' : '50%',
        'transform' : 'translateX(-50%)'
      });
    }
  }
}

and checkout the jsfiddle to see it in action: https://jsfiddle.net/cameronolivier/57nLjoyq/2/

---

I made something could work to emulate a background-size:cover and background-position:center.

If you want to change the position just change the styles "top" an "left" of the img

CSS

.box{
    overflow:hidden;
    position:relative;
}

.box img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

JS

$('.box').each(function() {
     //aspect ratio of container
     var boxRatio = $(this).height() / $(this).width(); 
     //aspect ration of image
     var imageRatio = $(this).children('img').height() / $(this).children('img').width();
     //set width or height 100% depend of difference
     if (imageRatio > boxRatio) {
          $(this).children('img').css({"width":"100%","height":"auto"});                
     } else {
          $(this).children('img').css({"height":"100%","width":"auto" });
     }
});

This function should be activated on "load" and "resize" event.

참고URL : https://stackoverflow.com/questions/19776670/how-to-emulate-background-size-cover-on-img