CSSでサイズ変更およびトリミングされた画像を表示する

サイズ比が異なっていても、特定の幅と高さのURLから画像を表示したい。したがって、サイズを変更し（比率を維持）、画像を希望のサイズにカットします。

私はhtml imgプロパティでサイズを変更でき、でカットできbackground-imageます。
どうすれば両方できますか？

例：

この画像：

サイズが800x600ピクセルで、200x100ピクセルのイメージのように表示したい

img私は画像のサイズを変更することができます200x150px：

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">

それは私にこれを与えます：

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">

とbackground-image私は画像の200x100ピクセルをカットすることができます。

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

くれます：

    <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>

どうすれば両方できますか？
画像のサイズを変更して、必要なサイズにカットしますか？

両方の方法を組み合わせて使用​​できます。

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }

    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

ネガティブmarginを使用して、内で画像を移動できます<div/>。

CSS3を使用すると、のサイズを変更background-imageしてbackground-size、両方の目標を一度に達成できます。

あります例の束にcss3.infoが。

例に基づいて実装され、donald_duck_4.jpgを使用します。この場合、background-size: cover;あなたが望むものだけです-それbackground-imageは包含の全領域をカバーするように適合し、<div>（比率に応じて）過剰をクリップします。

.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}

<div class="with-bg-size">Donald Duck!</div>

css3 背景画像 背景サイズ

これを使ってみましたか？

.centered-and-cropped { object-fit: cover }

画像のサイズを変更し、中央（垂直方向と水平方向の両方）にトリミングしてからトリミングします。

私はそれが単一のcss-lineで実行できることを見つけて幸せでした。ここの例を確認してください：http : //codepen.io/chrisnager/pen/azWWgr/?editors=110

ここでCSSそしてHTMLその例からのコードは：

.centered-and-cropped { object-fit: cover }

<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
    
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200" 
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

<div class="imgContainer">
  <img src="imageSrc" />
</div>

含まれているdivは、本質的にオーバーフローを非表示にすることで画像を切り抜きます

img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />

sanchothefatに感謝します。

私はあなたの答えを改善しました。トリミングはすべての画像に合わせて調整されているため、この定義はCSSではなくHTMLで行う必要があります。

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>

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

object-fitあなたが<img>タグで遊んでいるなら、あなたを助けるかもしれません

以下のコードは画像をトリミングします。オブジェクトフィットで遊ぶことができます

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

ライブ例：https : //jsfiddle.net/de4Lt57z/

HTML：

<div class="crop">
  <img src="example.jpg" alt="..." />
</div>

CSS：

    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

説明： ここで、画像は画像の幅と高さの値によってサイズ変更されます。そしてクロップはクリップのプロパティによって行われます。

クリッププロパティの詳細については、次のとおりです。http： //tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

トリミングクラスで、表示する画像サイズを配置します。

.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

HTMLは次のようになります。

<div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>

<p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p> 

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}

imgタグをdivタグに入れて両方を行うことができますが、ブラウザーで画像をスケーリングしないことをお勧めします。ブラウザは非常に単純なスケーリングアルゴリズムを備えているため、ほとんどの場合、お粗末な作業を行います。最初にPhotoshopまたはImageMagickでスケーリングを行ってから、クライアントに適切に提供することをお勧めします。

私がやったのは、サーバー側で画像のサイズを変更してトリミングするサーバー側スクリプトを作成して、インターウェブ経由で送信するデータを少なくすることです。

それはかなり些細なことですが、もし誰かが興味があれば、コードを掘り下げて投稿することができます（asp.net）

これを行う Filestackのようなサービスがあります。

画像のURLを取得し、URLパラメータを使用してサイズを変更できます。とても簡単です。

200x100にサイズ変更した後、画像は次のようになりますが、アスペクト比は維持されます

全体のURLはこのようになります

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

しかし重要な部分はただ

resize=width:200/crop=d:[0,25,200,100]

clip-pathプロパティを使用してみてください：

clip-pathプロパティを使用すると、要素を基本的な形状またはSVGソースにクリップできます。

注：clip-pathプロパティは、廃止されたclipプロパティを置き換えます。

img {
  width: 150px;
  clip-path: inset(30px 35px);
}

<img src="http://i.stack.imgur.com/wPh0S.jpg">

その他の例はこちら。

<div class="crop">
    <img src="image.jpg"/>
</div>

.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  width: 100%;
  /*Here you can use margins for accurate positioning of cropped image*/
}

あなたがブートストラップを使用している場合は、使用してみてください{ background-size: cover; }ために<div>多分のdivにクラスの発言権を与える<div class="example" style=url('../your_image.jpeg');>ことになるので、 div.example{ background-size: cover}

最近これを行う必要がありました。NOAAグラフへのサムネイルリンクを作成したいと思いました。彼らのグラフはいつでも変わる可能性があるので、サムネイルもそれに合わせて変更したかったのです。ただし、グラフには問題があります。グラフの上部に大きな白い境界線があるため、縮小してサムネイルを作成すると、ドキュメント内に余分な空白ができてしまいます。

これが私がそれを解決した方法です：

http://sealevel.info/example_css_scale_and_crop.html

最初に、少し計算をする必要がありました。NOAAからの元の画像は960×720ピクセルですが、上部の70ピクセルは余分な白い境界領域です。上部に余分な境界線領域のない348×172のサムネイルが必要でした。つまり、元の画像の目的の部分は720-70 = 650ピクセルの高さです。それを172ピクセル、つまり172/650 = 26.5％に縮小する必要がありました。つまり、70の26.5％=スケーリングされた画像の上から19行のピクセルを削除する必要がありました。

そう…

1. 高さ= 172 + 19 = 191ピクセルを設定します。

   height = 191

2. 下余白を-19ピクセルに設定します（画像を172ピクセルの高さに短縮します）。

   margin-bottom：-19px

3. 上部の位置を-19ピクセルに設定します（画像を上にシフトして、上部の19ピクセル行がオーバーフローし、下部の行ではなく非表示になるようにします）。

   上：-19px

結果のHTMLは次のようになります。

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

ご覧のとおり、<a>タグを含むスタイルを選択しましたが、代わりに<div>をスタイルすることもできます。

このアプローチの1つの成果物は、境界線を表示すると、上部の境界線が失われることです。とにかくborder = 0を使用しているので、それは私にとって問題ではありませんでした。

Kodemの画像サイズ変更サービスを使用できます。あなただけのhttp呼び出しで任意の画像のサイズを変更することができます。ブラウザでさりげなく使用したり、プロダクションアプリで使用したりできます。

• 好きな場所に画像をアップロードします（S3、imgurなど）。
• 専用APIのURL（ダッシュボードから）にプラグインします