css - 画像を自動的にトリミングして中央に配置する方法

Question

任意の画像が与えられた場合、画像の中心から正方形を切り取って、指定された正方形内に表示したいと考えています。

この質問はこれに似ています: CSS Display an Image Resized and Croppedですが、画像のサイズがわからないため、設定されたマージンを使用できません。

Answer 1

解決策の 1 つは、トリミングされた寸法に合わせたサイズの要素内の中央に配置された背景画像を使用することです。

---

基本的な例

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

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

Answer 2

これを試してください: 画像の切り抜きサイズを設定し、CSS で次の行を使用します。

object-fit: cover;

Answer 3

imgタグあり、タグなしの例background-image

このソリューションはimgタグを保持するため、ドラッグまたは右クリックして画像を保存する機能を失うことはありませんが、background-imagecss で中央に配置してトリミングするだけではありません。

非常に高い画像を除いて、縦横比を維持します。（リンクをチェック）

（実際に見る）

マークアップ

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

Answer 4

@Russ と @Alex の回答を使用して angularjs ディレクティブを作成しました

2014年以降は面白いかもしれません: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 + "')");
          }
      }
  });

フィドルリンク

Answer 5

これを試して：

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

widthとは、DOM 要素にレイアウト (や のheightようなブロック表示要素) がある場合にのみ機能することに注意してください。そうでない場合 (スパンなど)、CSS ルールに追加します。CSS ファイルにアクセスできない場合は、スタイルを要素内にインラインでドロップします。divimgdisplay: block;

Answer 6

画像を中央にトリミングする別の方法があります。

.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 タグの可能な幅、高さ属性をオーバーライドするために使用されます。