web-dev-qa-db-ja.com

CSSのサイズ変更およびトリミングした画像の表示

サイズ比が異なっていても、特定の幅と高さのURLからの画像を表示したいです。そのため、サイズを変更し（比率を維持し）、次にイメージを必要なサイズにカットします。

Htmlのimgプロパティでリサイズでき、background-imageでカットできます。
両方ともどうすればいいですか。

例：

この画像：

enter image description here


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


imgを使うと、画像のサイズを200x150pxに変更できます。

<img 
    style="width: 200px; height: 150px;" 
    src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">


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

<img style="width: 200px; height: 150px;" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">


そしてbackground-imageを使えば、200x100ピクセルの画像を切り取ることができます。

<div 
    style="background-image:
           url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

私にくれ：

<div style="background-image:url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>


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

htmlcssbackground-imageimage
305
InfoStatus

あなたは両方の方法の組み合わせを使用することができます。

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

CSS：

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

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

負のmarginを使用して、イメージを<div/>内で移動できます。

446
roborourke

CSS3では、background-imageのサイズを background-size で変更して、両方の目的を同時に達成することが可能です。

たくさんの例があります on css3.info .

あなたの例に基づいて実装されています 、 donald_duck_4.jpg を使って。この場合、background-size: cover;はまさにあなたが望むものです - それはそれを含むbackground-imageの全領域をカバーするために<div>にフィットし、（比率に応じて）余分な部分をクリップします。

.with-bg-size {
  background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.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背景画像背景サイズ

131
Joel Purra

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

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

画像のサイズを変更し、中央（縦と横の両方）にサイズを変更し、それをトリミングする必要がありました。

私はそれが単一のCSSラインで行われることができるということをうれしく思いました。ここで例をチェックしてください： http://codepen.io/chrisnager/pen/azWWgr/?editors=110

この例のCSSとHTMLコードは次のとおりです。

CSS： 

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


HTML： 

<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">
97
Anatolii Stepaniuk
.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

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

包含divはオーバーフローを隠すことによって本質的に画像をトリミングします。

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

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

ありがとうsanchothefat。

私はあなたの答えを改善しました。クロップはすべての画像に合わせて調整されているため、この定義はCSSではなくHTMLにする必要があります。

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>
6
Pedro Reis
img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}
4
151291

クロップクラスで、表示したい画像サイズを配置します。

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

object-fitタグで遊んでいるなら、<img>が役に立つかもしれません

下のコードはあなたのためにあなたの画像をトリミングします。 object-fit で遊べる

img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}
3
Hidayt Rahman
<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;
}
2
Sergey Chechaev

ライブ例： 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);
      }

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

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

2
Md. Rafee

Imgタグをdivタグに入れてその両方を行うことができますが、ブラウザで画像を拡大縮小することはお勧めしません。ブラウザは非常に単純化されたスケーリングアルゴリズムを持っているので、それはほとんどの場合、お粗末な仕事をします。最初にPhotoshopまたはImageMagickで拡大縮小してから、クライアントに提供してください。

1
Dave Markle

私がしたことは、サーバー側で画像のサイズを変更してトリミングするサーバーサイドスクリプトを作成することです。

それはかなり簡単ですが、もし誰かが興味を持っているなら、私はコードを掘り下げて投稿することができます（asp.net）

1
Rob

services 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]

enter image description here

1
ferrantim

私は最近これをする必要がありました。 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を使っているので、それは私にとって問題ではありませんでした。

0
Dave Burton
<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*/
}
0
Krone

ブートストラップを使用している場合は、{ background-size: cover; }に<div>を使用してみてください。divに<div class="example" style=url('../your_image.jpeg');>というクラスを指定して、div.example{ background-size: cover}になるようにします。

0
rshah