CSS ile bir görüntüyü gerçekten değiştirmenin imkansız olduğunu biliyorum, bu yüzden kırpmaya tırnak koyuyorum.

Yapmak istediğim şey dikdörtgen görüntüler almak ve görüntüyü bozmadan kare görünmelerini sağlamak için CSS kullanmak.

Temel olarak bunu çevirmek istiyorum:

Bunun içine:

IMG etiketlerinde bulunmaları gerekmediği varsayılarak ...

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 }

EDIT: div bir yere bağlantı gerekirse HTML ve Stilleri aşağıdaki gibi ayarlayın:

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 }

Bunun, duyarlılık olarak da değiştirilebileceğini unutmayın, örneğin% genişlik ve yükseklik vb.

Sarıcı divveya başka bir yararsız kod içermeyen saf bir CSS çözümü :

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

1. Resminizi bir div'a yerleştirin.
2. Div'inize açık kare boyutları verin.
3. Div'deki CSS taşma özelliğini hidden ( overflow:hidden) olarak ayarlayın.
4. Hayal gücünüzü div'in içine koyun.
5. Kar.

Örneğin:

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

Arka plan boyutunu kullanma: kapak - 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;
}  

İşaretleme:

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

Aslında son zamanlarda aynı problemle karşılaştım ve biraz farklı bir yaklaşımla sonuçlandım (arka plan görüntülerini kullanamadım). Görüntülerin yönünü belirlemek için olsa jQuery küçük bir bit gerektirir (Ben bunun yerine düz JS kullanabilirsiniz eminim).

Bunun hakkında bir blog yazısı yazdım fazla açıklama ile ilgileniyorsanız, ancak kod oldukça basitse, :

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

});

Görüntü duyarlı genişlikte bir kap içindeyse:

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

Benzer bir sorun vardı ve arka plan resimleri ile "uzlaşma". Ben bunu buldum.

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

Bu yardımcı olur umarım!

Örnek: https://jsfiddle.net/cfbuwxmr/1/

CSS kullan: taşma:

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

.Testimg sınıfıyla içindeki görüntünün içinde kare boyutlara sahip bir div kullanın:

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

.testimg {
    margin-left: -76px

}

veya görüntünün arka planına sahip kare bir div.

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

İşte bazı örnekler: http://jsfiddle.net/QqCLC/1/

GÖRÜNTÜ MERKEZLERİ GÜNCELLENDİ

.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 tam olarak ihtiyacınız olanı yapacak.

Ancak IE / Edge üzerinde çalışmayabilir. Tüm tarayıcılarda çalışmak için sadece CSS ile düzeltmek için aşağıda gösterildiği gibi izleyin .

Yaklaştığım yaklaşım, görüntüyü kabın içine mutlak olarak yerleştirmek ve daha sonra kombinasyonu kullanarak merkeze yerleştirmekti:

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

Merkezde olduğunda, görüntüye veriyorum,

// 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%;

Bu, görüntünün Object-fit: cover efektini almasını sağlar.

Yukarıdaki mantığın bir gösterimi.

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

Bu mantık tüm tarayıcılarda çalışır.

Gerçek görüntü

Dikey Kırpılmış

Yatay Kırpılmış