Diberikan gambar sewenang-wenang, saya ingin memotong persegi dari pusat gambar dan menampilkannya di dalam persegi yang diberikan.

Pertanyaan ini mirip dengan ini: CSS Menampilkan Gambar yang Diubah Ukurannya dan Dipotong , tapi saya tidak tahu ukuran gambarnya sehingga saya tidak bisa menggunakan set margin.

Salah satu solusinya adalah menggunakan gambar latar belakang yang dipusatkan di dalam elemen berukuran ke dimensi yang dipotong.

Contoh dasar

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

Contoh dengan imgtag

Versi ini mempertahankan imgtag agar kami tidak kehilangan kemampuan untuk menyeret atau mengklik kanan untuk menyimpan gambar. Kredit untuk Parker Bennett untuk trik opacity.

.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

Lihat browser yang didukung .

The CSS3 Images spesifikasi mendefinisikan object-fitdan object-positionsifat yang bersama-sama memungkinkan untuk kontrol lebih besar atas skala dan posisi konten gambar dari suatu imgelemen. Dengan ini, akan mungkin untuk mencapai efek yang diinginkan:

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

Saya sedang mencari solusi CSS murni menggunakan imgtag (bukan cara gambar latar belakang).

Saya menemukan cara yang brilian ini untuk mencapai tujuan pada memotong thumbnail dengan css :

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

Ini mirip dengan jawaban @Nathan Redblur tetapi juga memungkinkan untuk gambar potret.

Bekerja seperti pesona bagi saya. Satu-satunya hal yang perlu Anda ketahui tentang gambar adalah apakah itu potret atau lansekap untuk mengatur .portraitkelas jadi saya harus menggunakan sedikit Javascript untuk bagian ini.

Coba ini: Tetapkan dimensi pemangkasan gambar Anda dan gunakan baris ini di CSS Anda:

object-fit: cover;

Contoh dengan imgtag tetapi tanpabackground-image

Solusi ini mempertahankan imgtag sehingga kami tidak kehilangan kemampuan untuk menyeret atau mengklik kanan untuk menyimpan gambar tetapi tanpa background-imagehanya tengah dan memotong dengan css.

Pertahankan rasio aspek baik-baik saja kecuali dalam gambar yang sangat tinggi. (periksa tautan)

(lihat beraksi)

Markup

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

Saya membuat arahan sudut menggunakan jawaban @russ dan @ Alex

Bisa jadi menarik di tahun 2014 dan selanjutnya: 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 + "')");
          }
      }
  });

tautan biola

Coba ini:

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

Ingatlah itu widthdan heighthanya akan berfungsi jika elemen DOM Anda memiliki tata letak (blok yang ditampilkan elemen, seperti a divatau a img). Jika tidak (rentang, misalnya), tambahkan display: block;ke aturan CSS. Jika Anda tidak memiliki akses ke file CSS, jatuhkan style inline dalam elemen.

Ada cara lain Anda dapat memotong gambar terpusat:

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

Satu-satunya hal yang Anda perlukan adalah menambahkan kelas "vertikal" ke gambar vertikal, Anda dapat melakukannya dengan kode ini:

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

Catatan: "! Penting" digunakan untuk menimpa kemungkinan lebar, atribut tinggi pada tag img.