ด้วยภาพที่กำหนดเองฉันต้องการครอบตัดสี่เหลี่ยมจากกึ่งกลางของภาพและแสดงภายในสี่เหลี่ยมที่กำหนด

คำถามนี้คล้ายกับนี้: CSS แสดงรูปภาพที่ปรับขนาดและครอบตัดแต่ฉันไม่ทราบขนาดของรูปภาพดังนั้นฉันจึงไม่สามารถใช้ระยะขอบที่กำหนด

ทางออกหนึ่งคือการใช้ภาพพื้นหลังที่อยู่กึ่งกลางภายในองค์ประกอบที่มีขนาดจนถึงขนาดที่ถูกครอบตัด

ตัวอย่างพื้นฐาน

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

ตัวอย่างที่มีimgแท็ก

รุ่นนี้ยังคงimgแท็กเพื่อให้เราไม่สูญเสียความสามารถในการลากหรือคลิกขวาเพื่อบันทึกภาพ ขอมอบเครดิตให้แก่Parker Bennettสำหรับเคล็ดลับความทึบ

.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

ดูเบราว์เซอร์ที่สนับสนุน

ข้อกำหนด CSS3 รูปภาพกำหนดobject-fitและobject-positionคุณสมบัติกันซึ่งอนุญาตให้มีการควบคุมมากขึ้นกว่าขนาดและตำแหน่งของเนื้อหาภาพของimgองค์ประกอบ ด้วยสิ่งเหล่านี้มันจะเป็นไปได้ที่จะบรรลุผลที่ต้องการ:

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

ฉันกำลังมองหาโซลูชัน CSS ที่บริสุทธิ์โดยใช้imgแท็ก (ไม่ใช่วิธีภาพพื้นหลัง)

ฉันพบวิธีที่ยอดเยี่ยมในการบรรลุเป้าหมายในภาพขนาดย่อของครอบตัดด้วย 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;
}

มันคล้ายกับคำตอบของ @Nathan Redblur แต่ก็อนุญาตให้ถ่ายภาพบุคคลได้เช่นกัน

ทำงานเหมือนจับใจสำหรับฉัน สิ่งเดียวที่คุณต้องรู้เกี่ยวกับภาพคือไม่ว่าจะเป็นแนวตั้งหรือแนวนอนเพื่อตั้ง.portraitชั้นเรียนดังนั้นฉันจึงต้องใช้ Javascript เล็กน้อยสำหรับส่วนนี้

ลองสิ่งนี้: ตั้งค่าส่วนข้อมูลภาพและใช้บรรทัดนี้ใน CSS ของคุณ:

object-fit: cover;

ตัวอย่างที่มีimgแท็ก แต่ไม่มีbackground-image

โซลูชันนี้จะรักษาimgแท็กไว้เพื่อที่เราจะไม่สูญเสียความสามารถในการลากหรือคลิกขวาเพื่อบันทึกภาพ แต่ไม่มีbackground-imageเพียงแค่จัดกึ่งกลางและครอบตัดด้วย css

รักษาอัตราส่วนภาพให้ดียกเว้นในภาพที่มีความละเอียดสูงมาก (ตรวจสอบลิงก์)

(ดูการทำงาน)

มาร์กอัป

<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's และ @ Alex

อาจมีความน่าสนใจในปี 2557 หรือมากกว่า: 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 + "')");
          }
      }
  });

ลิงค์ซอ

ลองสิ่งนี้:

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

โปรดทราบว่าwidthและheightจะใช้งานได้เฉพาะเมื่อองค์ประกอบ DOM ของคุณมีเค้าโครง (องค์ประกอบที่แสดงบล็อกเช่นdivหรือimg ) หากไม่ใช่ (ตัวอย่างเช่น a span) ให้เพิ่มdisplay: block;กฎ CSS หากคุณไม่มีสิทธิ์เข้าถึงไฟล์ CSS ให้ปล่อยสไตล์อินไลน์ในองค์ประกอบ

มีอีกวิธีที่คุณสามารถครอบตัดภาพที่กึ่งกลาง:

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

สิ่งเดียวที่คุณจะต้องมีคือการเพิ่มคลาส "แนวตั้ง" ให้กับรูปภาพแนวตั้งคุณสามารถทำได้ด้วยรหัสนี้:

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

หมายเหตุ: "! important" ใช้เพื่อลบล้างความกว้างและความสูงของแอตทริบิวต์บนแท็ก img