CSS로 사각형 이미지를 사각형으로“자르는”방법은 무엇입니까?

CSS로 사각형 이미지를 사각형으로“자르는”방법은 무엇입니까?

---

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>

---

Using 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;
}  

Markup:

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

---

I actually came across this same problem recently and ended up with a slightly different approach (I wasn't able to use background images). It does require a tiny bit of jQuery though to determine the orientation of the images (I' sure you could use plain JS instead though).

I wrote a blog post about it if you are interested in more explaination but the code is pretty simple:

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');        
      }
    });

});

---

If the image is in a container with a responsive width:

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;
  }
}

---

Use CSS: overflow:

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

---

I had a similar issue and could not "compromise" with background images. I came up with this.

<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'});

Hope this helps!

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

---

.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>

참고 URL : https://stackoverflow.com/questions/15167545/how-to-crop-a-rectangular-image-into-a-square-with-css