web-dev-qa-db-ja.com

CSS画像のサイズ、塗りつぶし方、引き伸ばし方

画像があり、それを特定の幅と高さ（ピクセル単位）に設定したい

しかし、css（width:150px; height:100px）を使用して幅と高さを設定した場合、画像は引き伸ばされてしまい、見苦しいかもしれません。

CSSを使用して塗りつぶし画像を特定のサイズにし、非伸縮するにはどうすればよいですか？

塗りつぶしと引き伸ばしのイメージの例：

元の画像：

Original

ストレッチ画像：

Stretched

塗りつぶしの画像：

Filled

上記の塗りつぶし画像の例では、最初に、画像の縦横比を150×255に変更し、次に トリミング から150×100に変更しています。

cssimage
348
Mahdi Ghiasi

画像をCSSの背景として使用したい場合は、洗練された方法があります。 background-size CSS3プロパティでcoverまたはcontainを使用するだけです。

<div class="container"></div>​

.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}​

coverはあなたに縮小された画像を与えますが、containはあなたに縮小された画像を与えます。どちらもピクセル縦横比を維持します。

http://jsfiddle.net/uTHqs/ （カバーを使用）

http://jsfiddle.net/HZ2FT/ （containsを使用）

このアプローチには、Thomas Fuchsのクイックガイドに従ってRetinaディスプレイにやさしいという利点があります。 http://cl.ly/0v2u190o110R

両方の属性に対するブラウザサポートがIE6-8を除外していることに言及する価値があります。 http://www.quirksmode.org/css/background.html

330
depa

あなたはcssプロパティobject-fitを使うことができます。

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

ここの例を見てください

IEのためのpolyfillがあります： https://github.com/anselmh/object-fit

463
afonsoduarte

唯一の本当の方法はあなたのイメージの周りにコンテナを持っていてoverflow:hiddenを使うことです：

_ html _ 

<div class="container"><img src="ckk.jpg" /></div>

_ css _ 

.container {
    width: 300px;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

あなたが望むことをして画像を中央に置くのはCSSの苦痛です。jqueryには次のような簡単な修正があります。

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

http://jsfiddle.net/x86Q7/2/ /

56
Dominic Green

実際には、これはほとんどの この質問の支持された回答 （ Not 受け入れられたもの）からの派生にすぎません。

違いは3つあります。

  1. height要素にwidthおよびimage属性を指定する必要はありません。これらは属性によってオーバーライドされるためです。
    だからこのようなものを書くだけで十分です。

    <img class="cover" src="url to img ..."  />

  2. スタイルにwidth:100%を提供します。
    bootstrap を使用していて、イメージを利用可能な幅いっぱいに広げたい場合に便利です。

  3. heightプロパティの指定はオプションです。必要に応じて削除/保持できます。

    .cover {
   object-fit: cover;
   width: 100%;
   /*height: 300px;  optional, you can remove it, but in my case it was good */
}
41
Hakam Fostok

CSSソリューション、JS、背景画像なし：

方法1 "マージン自動"（IE8 + - NOT FF！）： 

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  position:absolute; 
  top:0; 
  bottom:0; 
  margin: auto;
  width:100%;
}
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/

方法2 "変換"（IE9 +）： 

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}

div img{
  position:absolute; 
  width:100%;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/1/ /

方法2は、固定幅/高さコンテナの中央に画像を配置するために使用できます。両方ともオーバーフローする可能性があります - そして画像がコンテナよりも小さい場合でも、中央に配置されます。

http://jsfiddle.net/5xjr05dt/3/ /

方法3 "ダブルラッパー"（IE8 + - NOT FF！）： 

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;  */ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: table;
    left: 50%;
}
.inner img {
    display: block;
    border: 1px solid blue; /* just for example */
    position: relative;
    right: 50%;
    opacity: .5; /* just for example */
}
<div class="outer">
  <div class="inner">
     <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

http://jsfiddle.net/5xjr05dt/5/ /

方法4 "double wrapper AND double image"（IE8 +）： 

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;  */ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 50%;
    bottom: 0;
    display: table;
    left: 50%;
}
.inner .real_image {
    display: block;
    border: 1px solid blue; /* just for example */
    position: absolute;
    bottom: 50%;
    right: 50%;
    opacity: .5; /* just for example */
}

.inner .placeholder_image{
  opacity: 0.1; /* should be 0 */
}
<div class="outer">
  <div class="inner">
    <img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
    <img class="placeholder_image"  src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

http://jsfiddle.net/5xjr05dt/26/ /

  • 方法1の方がややサポートが優れています - 画像の幅OR高さを設定する必要があります。
  • 接頭辞を付けると、方法2は（ie 9から）まともなサポートを受けます - 方法2はOpera miniをサポートしていません！
  • 方法3は2つのラッパーを使用します - 幅と高さがオーバーフローする可能性があります。
  • 方法4は二重画像（プレースホルダーとして1つ）を使用しますこれはいくらかの余分な帯域幅オーバーヘッドを与えますが、さらに良いクロスブラウザサポート。

方法1と3はFirefoxでは動作しないようです

25
J.T. Houtenbos

もう1つの解決策は、イメージを希望の幅と高さのコンテナに入れることです。この方法を使用すると、画像を要素の背景画像として設定する必要がなくなります。

それからimgタグを使ってこれを行い、要素にmax-widthとmax-heightを設定するだけです。

CSS：

.imgContainer {
    display: block;
    width: 150px; 
    height: 100px;
}

.imgContainer img {
    max-width: 100%;
    max-height: 100%;
}

HTML：

<div class='imgContainer'>
    <img src='imagesrc.jpg' />
</div>

これで、コンテナのサイズを変更すると、画像は境界の外に出たり歪んだりすることなく、できる限り自動的に拡大します。

縦横に画像の中央をしたい場合は、コンテナのCSSを次のように変更します。

.imgContainer {
    display: table-cell;
    width: 150px; 
    height: 100px;
    text-align: center;
    vertical-align: middle;
}

これがJS Fiddle http://jsfiddle.net/9kUYC/2/です /

8
earl3s

@Dominic Greenの答えをjQueryを使って構築したものです。ここでは、高すぎる画像よりも幅の広い画像、または高すぎる画像の場合に有効なソリューションを紹介します。

http://jsfiddle.net/grZLR/4/

JavaScriptを実行するよりエレガントな方法がおそらくありますが、これはうまくいきます。

function myTest() {
  var imgH = $("#my-img").height();
  var imgW = $("#my-img").width();
  if(imgW > imgH) {
    $(".container img").css("height", "100%");
    var conWidth = $(".container").width();
    var imgWidth = $(".container img").width();
    var gap = (imgWidth - conWidth)/2;
    $(".container img").css("margin-left", -gap);
  } else {
    $(".container img").css("width", "100%");
    var conHeight = $(".container").height();
    var imgHeight = $(".container img").height();
    var gap = (imgHeight - conHeight)/2;
    $(".container img").css("margin-top", -gap);
  }
}
myTest();
5
ramdog

私は Fillmore と呼ばれるjQueryプラグインの構築を手助けしました。これはそれをサポートするブラウザでbackground-size: coverを処理しますが、サポートしていないものにはシムがあります。見てください。

4
Aidan Feldman

これは、画像を拡大したり、トリミングすることなく、特定のサイズに合わせます。

img{
    width:150px;  //your requirement size
    height:100px; //your requirement size

/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
    object-fit:scale-down;
}
3
Manoj Selvin

私はこの答えにはかなり遅れていると思います。とにかくこれが将来誰かに役立つことを願っています。私はカードを角度のある位置に配置する問題に直面しました。イベントの配列のために表示されているカードがあります。イベントの画像の幅がカードに対して大きい場合、画像は両側からトリミングして100％の高さで表示されるべきです。画像の高さが長い場合は、画像の下部がトリミングされ、幅が100％になります。これが私の純粋なCSSソリューションです。

enter image description here

HTML： 

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

_ css _ 

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}
3
Nodirabegimxonoyim

このようなことを試してみてください： http://jsfiddle.net/D7E3E/4/

オーバーフロー付きのコンテナを使用する：hidden

編集：@Dominicグリーンは私を破った。

3
woutr_be
  • CSSバックグラウンドを使用しない
  • クリップするのは1 divのみ
  • 正しいアスペクト比を維持するために最小幅にサイズ変更
  • 中心から切り取る（垂直および水平、上、左、および変換で調整できます）

テーマなどを使用している場合は注意してください。多くの場合、img max-widthを100％で宣言します。あなたは何も作らなかった。テストしてみてください:)

https://jsfiddle.net/o63u8sh4/

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
    <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>


div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  min-width:100%;
  min-height:100%;
  height:auto;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}
1
dmegatool