html - CSSで長方形の画像を正方形に「トリミング」する方法は?

Question

CSS で実際に画像を変更することは不可能であることはわかっています。そのため、crop を引用符で囲みます。

私がやりたいのは、長方形の画像を取得し、CSS を使用して、画像をまったく歪ませずに正方形に見せることです。

私は基本的にこれを変えたいです：

これに：

Answer 1

ラッパーdivやその他の役に立たないコードのない純粋な CSS ソリューション:

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

Answer 2

それらがIMGタグに含まれている必要がないと仮定すると...

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 }

編集：divがどこかにリンクする必要がある場合は、次のようにHTMLとスタイルを調整してください。

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 }

これは、たとえば幅や高さの割合など、レスポンシブになるように変更することもできることに注意してください。

Answer 3

1. 画像を div に配置します。
2. div に明示的な正方形の寸法を指定します。
3. div の CSS オーバーフロー プロパティを非表示 ( overflow:hidden) に設定します。
4. あなたの想像をdivの中に入れてください。
5. 利益。

例えば：

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

Answer 4

私は実際に最近この同じ問題に遭遇し、わずかに異なるアプローチになりました (背景画像を使用できませんでした)。ただし、画像の向きを判断するには、ほんの少しの jQuery が必要です (ただし、代わりにプレーンな JS を使用できると確信しています)。

詳細な説明に興味がある場合は、それについてのブログ投稿を書きましたが、コードは非常に単純です。

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

});

Answer 5

同様の問題があり、背景画像で「妥協」できませんでした。私はこれを思いつきました。

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

お役に立てれば！

例: https://jsfiddle.net/cfbuwxmr/1/

Answer 6

CSS を確認するaspect-ratio

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

.square-image{
  width: 50%;
  background-image: url('https://picsum.photos/id/0/367/267');
  background-size: cover;
  background-position: center;
  aspect-ratio: 1/1;
}

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

Answer 7

CSS を使用: オーバーフロー:

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

Answer 8

.testimg クラスを使用して、内部の画像で正方形の寸法の div を使用します。

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

.testimg {
    margin-left: -76px

}

または画像の背景を持つ正方形の div。

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

ここにいくつかの例があります: http://jsfiddle.net/QqCLC/1/

更新されたので、画像センター

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