61

CSS のみを使用して、ランダムなサイズの画像を 160x160 の正方形にトリミングする必要があります。画像は、トリミング時に中央に配置する必要があります。

私のマークアップは次のようになります。

<a href="#" class="cropper">
   <img src="image" alt="description" />
</a>

StackOverflow で検索すると、いくつかの回答が見つかりました ( CSS - How to crop an image to a square, if it is already square then resize itなど)。または垂直（背が高い）。

具体的には、次のようなワイド画像を両方表示できるようにする必要があります。

ワイド画像

そして、このような背の高い画像：

背の高い画像

横の長方形か縦の長方形かを事前に知らずに、正方形の形で。また、すでに正方形の画像もサポートする必要があります。

4

9 に答える 9

104

jsFiddle デモ

div {
    width: 250px;
    height: 250px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
img {
    position: absolute;
    left: -1000%;
    right: -1000%;
    top: -1000%;
    bottom: -1000%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}
<div>
    <img src="https://i.postimg.cc/TwFrQXrP/plus-2.jpg" />
</div>

サイズに関するご注意

Salman Aがコメントで述べたように、 img の位置座標 (上、左、下、右) を設定して、画像の実際の寸法よりも高いパーセントで動作するようにする必要があります。上記の例では1000%を使用していますが、もちろん必要に応じて調整できます。

修正前と修正後

* さらなる説明: imgの左右(または:上と下) 座標を(含むdivの) -100%に設定すると、 imgの全体的な許容幅(または:高さ) は、含まれるdivの幅(または:高さ) のほとんど300% 。これは、 divの幅 (または:高さ)と左右(または:上と下)の合計であるためです。) 座標。

于 2013-09-07T14:08:49.587 に答える
1

次のようにイメージをコンテナーに入れてみてください。

HTML:

<div>
    <img src="http://www.testimoniesofheavenandhell.com/Animal-Pictures/wp-content/uploads/2013/04/Dog-Animal-Picture-Siberian-Husky-Puppy-HD-Wallpaper.jpg" />
</div>

CSS:

div
{
    width: 200px;
    height: 200px;
    overflow: hidden;
}

div > img
{
    width: 300px;
}

ここにフィドルがあります。

于 2013-09-07T13:48:43.063 に答える
1

clipのプロパティpositionがあなたを助けるかもしれません

a{
position:absolute;
clip:rect(0px,200px,200px,0px);
}

a img{
position:relative;
left:-50%;
top:-50%;
 }

働くフィドル

于 2013-09-07T14:08:20.320 に答える
1

ここに画像の説明を入力 次のリンクでより良い解決策を見つけました。「object-fit」 のみを使用https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

于 2017-04-12T08:12:19.450 に答える
0

HTML:

<div class="thumbnail">
</div>

CSS:

.thumbnail { 
background: url(image.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}
于 2014-08-12T08:49:06.583 に答える
0 
<div style="specify your dimension:overflow:hidden">
    <div style="margin-top:-50px">
       <img ...  />
    </div>
</div>

上記は、画像の上部から 50px をトリミングします。画像の寸法に基づいて、要件に適合する上部余白を計算することができます。

下からトリミングするには、外側の div の高さを指定し、内側の div を削除します。同じ原則を適用して、側面からトリミングします。

于 2013-09-07T14:01:30.790 に答える