Herhangi bir keyfi görüntü göz önüne alındığında, görüntünün merkezinden bir kareyi kırpmak ve belirli bir karede görüntülemek istiyorum.

Bu soru şuna benzer: CSS Yeniden Boyutlandırılan ve Kırpılan Bir Görüntüyü Göster , ancak görüntünün boyutunu bilmiyorum, bu nedenle ayarlanan kenar boşluklarını kullanamıyorum.

Çözümlerden biri, kırpılan boyutlara göre boyutlandırılmış bir öğe içinde ortalanmış bir arka plan görüntüsü kullanmaktır.

Temel örnek

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
</div>

İle Örnek imgetiketi

Bu sürüm, imgetiketi sürükleyerek görüntüyü kaydetmek için sürükleme veya sağ tıklama özelliğini kaybetmiyoruz. Opaklık hilesi için Parker Bennett'e teşekkür ederiz.

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Set the image to fill its parent and make transparent */
.center-cropped img {
  min-height: 100%;
  min-width: 100%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* modern browsers */
  opacity: 0;
}

<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
  <img src="http://placehold.it/200x200" />
</div>

object-fit/-position

Desteklenen tarayıcılara bakın .

CSS3 Çıkan özellikleri tanımlar object-fitve object-position, daha büyük bir ölçekte üzerinde kontrol ve bir görüntü içeriğinin pozisyonu sağlar özellikleri imgelemanı. Bunlarla, istenen etkiyi elde etmek mümkün olacaktır:

.center-cropped {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}

<img class="center-cropped" src="http://placehold.it/200x200" />

imgEtiketleri (arka plan görüntüsü yolu değil) kullanarak saf bir CSS çözümü arıyordum .

Ben css ile kırpma küçük resimlerde hedefe ulaşmak için bu parlak yolu buldum :

.thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}

@Nathan Redblur'un cevabına benzer, ancak portre görüntülerine de izin verir.

Benim için bir cazibe gibi çalışıyor. Görüntü hakkında bilmeniz gereken tek şey .portrait, bu kısmı için biraz Javascript kullanmak zorunda kaldım, böylece sınıfı ayarlamak için portre veya manzara olup olmadığıdır .

Bunu deneyin: Görüntü kırpma boyutlarınızı ayarlayın ve bu satırı CSS'nizde kullanın:

object-fit: cover;

imgEtiketi olan ancak içermeyen örnekbackground-image

Bu çözüm imgetiketi korur, böylece görüntüyü kaydetmek için sürükleme veya sağ tıklama yeteneğini kaybetmeziz, ancak background-imagesadece css ile ortalayıp kırpmaz.

Çok yüksek görüntüler dışında en / boy oranını koruyun. (bağlantıyı kontrol edin)

(eylemde görüntüle)

Biçimlendirme

<div class="center-cropped">
    <img src="http://placehold.it/200x150" alt="" />
</div>

CSS

div.center-cropped {
  width: 100px;
  height: 100px;
  overflow:hidden;
}
div.center-cropped img {
  height: 100%;
  min-width: 100%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}

@ Russ'ın ve @ Alex'in cevaplarını kullanarak bir açısaljs direktifi oluşturdum

2014 ve sonrasında ilginç olabilir: P

html

<div ng-app="croppy">
  <cropped-image src="http://placehold.it/200x200" width="100" height="100"></cropped-image>
</div>

js

angular.module('croppy', [])
  .directive('croppedImage', function () {
      return {
          restrict: "E",
          replace: true,
          template: "<div class='center-cropped'></div>",
          link: function(scope, element, attrs) {
              var width = attrs.width;
              var height = attrs.height;
              element.css('width', width + "px");
              element.css('height', height + "px");
              element.css('backgroundPosition', 'center center');
              element.css('backgroundRepeat', 'no-repeat');
              element.css('backgroundImage', "url('" + attrs.src + "')");
          }
      }
  });

keman bağı

Bunu dene:

#yourElementId
{
    background: url(yourImageLocation.jpg) no-repeat center center;
    width: 100px;
    height: 100px;
}

Bunu unutmayın widthve heightyalnızca DOM öğenizin düzeni varsa (a divveya an gibi bir blok görüntülenen öğe img). Değilse (örneğin, bir açıklık), display: block;CSS kurallarına ekleyin . CSS dosyalarına erişiminiz yoksa stilleri öğeye satır içi bırakın.

Görüntüyü ortalayarak kırpmanın başka bir yolu daha vardır:

.thumbnail{position: relative; overflow: hidden; width: 320px; height: 640px;}
.thumbnail img{
    position: absolute; top: -999px; bottom: -999px; left: -999px; right: -999px;
    width: auto !important; height: 100% !important; margin: auto;
}
.thumbnail img.vertical{width: 100% !important; height: auto !important;}

İhtiyacınız olan tek şey dikey görüntülere "dikey" sınıf eklemek, bunu bu kodla yapabilirsiniz:

jQuery(function($) {
    $('img').one('load', function () {
        var $img = $(this);
        var tempImage1 = new Image();
        tempImage1.src = $img.attr('src');
        tempImage1.onload = function() {
            var ratio = tempImage1.width / tempImage1.height;
            if(!isNaN(ratio) && ratio < 1) $img.addClass('vertical');
        }
    }).each(function () {
        if (this.complete) $(this).load();
    });
});

Not: "! İmportant", img etiketindeki olası genişlik, yükseklik niteliklerini geçersiz kılmak için kullanılır.