CSS로 이미지를 실제로 수정하는 것은 불가능하다는 것을 알고 있으므로 자르기를 따옴표로 묶습니다.

내가하고 싶은 것은 직사각형 이미지를 가져 와서 CSS를 사용하여 이미지를 전혀 왜곡하지 않고 사각형으로 보이게하는 것입니다.

기본적으로 이것을 돌리고 싶습니다.

이것으로 :

그들이 IMG 태그에있을 필요가 없다고 가정하면 ...

HTML :

<div class="thumb1">
</div>

CSS :

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1:hover { YOUR HOVER STYLES HERE }

편집 : div를 어딘가에 연결 해야하는 경우 HTML과 스타일을 다음과 같이 조정하십시오.

HTML :

<div class="thumb1">
<a href="#">Link</a>
</div>

CSS :

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1 a {
  display: block;
  width: 250px;
  height: 250px;
}

.thumb1 a:hover { YOUR HOVER STYLES HERE }

예를 들어 % 너비 및 높이 등과 같이 반응 형으로 수정 될 수도 있습니다.

래퍼 div나 다른 쓸모없는 코드가없는 순수한 CSS 솔루션 :

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

1. div에 이미지를 배치하십시오.
2. div에 정사각형 치수를 지정하십시오.
3. div의 CSS overflow 속성을 hidden ( overflow:hidden)으로 설정하십시오.
4. 당신의 상상력을 div 안에 넣으십시오.
5. 이익.

예를 들면 다음과 같습니다.

<div style="width:200px;height:200px;overflow:hidden">
    <img src="foo.png" />
</div>

background-size : cover 사용 -http : //codepen.io/anon/pen/RNyKzB

CSS :

.image-container {
  background-image: url('http://i.stack.imgur.com/GA6bB.png');
  background-size:cover;
  background-repeat:no-repeat;
  width:250px;
  height:250px;
}  

마크 업 :

<div class="image-container"></div>

실제로 최근 에이 같은 문제가 발생하여 약간 다른 접근법으로 끝났습니다 (배경 이미지를 사용할 수 없었습니다). 이미지의 방향을 결정하기 위해 약간의 jQuery가 필요합니다 (하지만 대신 일반 JS를 사용할 수 있다고 확신합니다).

더 많은 설명에 관심이 있지만 코드가 매우 간단하다면 블로그 게시물을 작성했습니다 .

HTML :

<ul class="cropped-images">
  <li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
  <li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>

CSS :

li {
  width: 150px; // Or whatever you want.
  height: 150px; // Or whatever you want.
  overflow: hidden;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}
li img {
  max-width: 100%;
  height: auto;
  width: auto;
}
li img.landscape {
  max-width: none;
  max-height: 100%;
}

jQuery :

$( document ).ready(function() {

    $('.cropped-images img').each(function() {
      if ($(this).width() > $(this).height()) {
        $(this).addClass('landscape');        
      }
    });

});

이미지가 반응 너비 가있는 컨테이너에있는 경우 :

HTML

<div class="img-container">
  <img src="" alt="">
</div>

CSS

.img-container {
  position: relative;

  &::after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }

  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

비슷한 문제가 발생하여 배경 이미지가 "손상되지"않았습니다. 나는 이것을 생각해 냈습니다.

<div class="container">
    <img src="http://lorempixel.com/800x600/nature">
</div>

.container {
    position: relative;
    width: 25%; /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */
    border: 2px solid #fff; /* just to separate the images */
    overflow: hidden; /* "crop" the image */
    background: #000; /* incase the image is wider than tall/taller than wide */
}

.container img {
    position: absolute;
    display: block;
    height: 100%; /* all images at least fill the height */
    top: 50%; /* top, left, transform trick to vertically and horizontally center image */
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

//assuming you're using jQuery
var h = $('.container').outerWidth();
$('.container').css({height: h + 'px'});

도움이 되었기를 바랍니다!

예 : https://jsfiddle.net/cfbuwxmr/1/

CSS 사용 : overflow :

.thumb {
   width:230px;
   height:230px;
   overflow:hidden
}

.testimg 클래스 안에 이미지가있는 정사각형 크기의 div를 사용하십시오.

.test {
width: 307px;
height: 307px;
overflow:hidden
}

.testimg {
    margin-left: -76px

}

또는 이미지의 배경이있는 정사각형 div.

.test2 {
width: 307px;
height: 307px;
    background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

몇 가지 예는 다음과 같습니다. http://jsfiddle.net/QqCLC/1/

이미지 센터 업데이트

.test {
  width: 307px;
  height: 307px;
  overflow: hidden
}

.testimg {
  margin-left: -76px
}

.test2 {
  width: 307px;
  height: 307px;
  background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

<div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class="testimg" /></div>

<div class="test2"></div>

object-fit: cover 필요한 것을 정확하게 수행합니다.

그러나 IE / Edge에서는 작동하지 않을 수 있습니다. 모든 브라우저 에서 작동하도록 CSS 로 수정하려면 아래 표시된대로 수행하십시오. .

내가 취한 접근법은 이미지를 컨테이너 내부에 절대 위치 로 배치 한 다음 조합을 사용하여 중앙에 배치 하는 것입니다.

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

중앙에 있으면 이미지를 제공합니다.

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

이것은 이미지가 Object-fit : cover의 효과를 얻도록합니다.

위의 논리에 대한 데모입니다.

https://jsfiddle.net/furqan_694/s3xLe1gp/

이 논리는 모든 브라우저에서 작동합니다.

원본 이미지

세로 자르기

가로 자르기