400

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

htmlimgプロパティでリサイズ、 でカットでき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>


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

4

21 に答える 21

533

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

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

于 2009-01-29T20:42:52.320 に答える
149

CSS3 では、background-imagewithのサイズを変更することが可能で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>

于 2012-02-05T12:17:45.970 に答える
22 
.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

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

含まれている div は、オーバーフローを非表示にすることで基本的に画像をトリミングします。

于 2009-01-29T20:44:51.863 に答える
13 
img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />
于 2014-03-12T06:38:49.273 に答える
6 
img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}
于 2015-05-12T04:51:40.120 に答える
5

実際の例: 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/を参照してください。

于 2016-04-17T03:21:10.623 に答える
4

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

.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>
于 2015-05-25T19:52:03.017 に答える
2

これを行う 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]

ここに画像の説明を入力

于 2017-01-25T19:53:15.893 に答える
1

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

于 2009-01-29T20:40:32.090 に答える
1

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

それはかなり些細なことですが、誰かが興味を持っている場合は、コードを掘り下げて投稿できます (asp.net)

于 2009-01-29T20:46:05.123 に答える
0 
<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*/
}
于 2014-02-28T11:29:32.783 に答える