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

Question

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>

どうすれば両方できるでしょうか？
画像のサイズを変更してから、希望のサイズにカットしますか?

Answer 1

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

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

Answer 2

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

がある たくさんの例 の上 css3.info.

あなたの例に基づいて実装されました, を使用して ドナルドダック_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 背景画像 背景サイズ

Answer 3

あなたはこれを使用しようとしましたか？

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

Iは画像中心（垂直方向と水平方向の両方）と、それをトリミングよりもサイズを変更する必要があった。

私はそれが単一のCSSラインで行うことができることを、見つけることが幸せでした。 ここでの例を確認してください： http://codepen.io/chrisnager/pen/azWWgr/ ？エディタ= 110 の

<時間>

ここではその例からCSSとHTMLcodeある

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

Answer 4

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

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

本質的にオーバーフローを隠すことによって、画像を切り抜くとともに含むDIVを

Answer 5

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

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

Answer 6

ありがとうsanchothefatます。

私はあなたの答えに改善しています。作物は非常にすべての画像に合わせて調整されるように、この定義は、HTMLではなくCSSである必要があります。

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

Answer 7

object-fit 一緒に遊んでいるなら役立つかもしれない <img> 鬼ごっこ

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

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

Answer 8

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

Answer 9

作物クラスでは、表示したい画像サイズを置きます

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

Answer 10

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

Answer 11

ライブ例： 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/ 1月16日/理解-CSS-クリップ性/ の

Answer 12

あなたはdivタグにimgタグを入れて、両方を行うが、私は、ブラウザで画像を拡大縮小に対して推薦することができます。ブラウザは非常に単純なスケーリングアルゴリズムを持っているので、それはほとんどの時間をお粗末な仕事をしていません。より良い最初のPhotoshopやImageMagickの中にあなたのスケーリングを行うために、クライアントの素敵にそれを果たし、かなります。

Answer 13

私は何をやったことは、それはinterweb全体で少ないデータをお送りしますので、サーバ側で画像のサイズを変更してトリミングするサーバーサイドスクリプトを作成することです。

これはかなり些細だが、誰もが興味を持っている場合は、私が掘ると、コードを投稿することができます（asp.net）

Answer 14

がある<のhref = "http://blog.filestack.com/api/how-to-automatically-resize-fit-and-align-any-image-using-only-url-parameters/" のrel =「nofollowをnoreferrer」>サービスはあなたのためにこれを行いますその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]

" ここに画像の説明を入力する

Answer 15

<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*/
}

Answer 16

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

Answer 17

最近これをする必要がありました。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 = 19 行のピクセルの 26.5% を、拡大縮小された画像の上部から削除する必要があることを意味します。

それで…

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

   身長=191

2. 下マージンを -19 ピクセルに設定します (画像を高さ 172 ピクセルに短縮します)。

   マージン-ボトム:-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 を使用するので、それは私にとって問題ではありませんでした。