CSS Görüntü boyutu, nasıl doldurulur, gerilmez?

Bir görüntüm var ve belirli bir genişlik ve yükseklik (piksel cinsinden) ayarlamak istiyorum

Ancak css ( width:150px; height:100px) kullanarak genişliği ve yüksekliği ayarlarsam görüntü gerilir ve çirkin olabilir.

Görüntüleri CSS kullanarak belirli bir boyuta nasıl doldurur ve uzatmazsınız ?

Dolgu ve germe görüntüsü örneği:

Orijinal görüntü:

Gergin Görüntü:

Dolgulu Görüntü:

Yukarıdaki Doldurulmuş resim örneğinde: önce görüntünün 150x255 olarak (korunan en boy oranı) yeniden boyutlandırıldığını ve ardından 150x100 olarak kırpıldığını lütfen unutmayın .

Görüntüyü CSS arka planı olarak kullanmak istiyorsanız zarif bir çözüm var. Basitçe kullanmak coverveya containiçinde background-sizeCSS3 özelliği.

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

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

coverSize ölçeklendirilmiş bir görüntü verirken , ölçeklendirilmiş bir görüntü containverecektir. Her ikisi de piksel en boy oranını koruyacaktır.

http://jsfiddle.net/uTHqs/ (kapak kullanarak)

http://jsfiddle.net/HZ2FT/ (içeren kullanma)

Bu yaklaşım, Thomas Fuchs'un hızlı rehberine göre Retina ekranlarına dost olma avantajına sahiptir .

Her iki özellik için tarayıcı desteğinin IE6-8'i hariç tuttuğunu belirtmek gerekir.

Css özelliğini kullanabilirsiniz object-fit.

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

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

Buradaki örneğe bakın

IE için bir çoklu dolgu var: https://github.com/anselmh/object-fit

Geliştirme üzerinde @afonsoduarte yukarıdaki cevap ( DEĞİL kabul bir) . bootstrap
kullanmanız durumunda

1. width:100%Stil üzerinde sağlanması .
   Bu, bootstrap kullanıyorsanız ve görüntünün mevcut tüm genişliği genişletmesini istiyorsanız yararlıdır .
   

2. heightÖzelliği belirtmek isteğe bağlıdır, istediğiniz gibi kaldırabilir / saklayabilirsiniz

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

3. Bu arada, stil tarafından geçersiz kılınacağı için öğe üzerinde heightve widthniteliklerini sağlamaya gerek yoktur image.
   bu yüzden böyle bir şey yazmak yeterlidir.

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

Tek gerçek yol, görüntünüzün etrafında bir kap bulundurmak ve kullanmaktır 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%;
}

İstediğinizi yapmak ve görüntüyü ortalamak CSS'de bir acıdır, jquery'de hızlı bir düzeltme vardır:

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/

CSS çözümü JS yok ve arka plan resmi yok:

Yöntem 1 "otomatik kenar boşluğu" (IE8 + - FF DEĞİL!):

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/

Yöntem 2 "dönüştürme" (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/

Yöntem 2, görüntüyü sabit bir genişlik / yükseklik konteynerinde ortalamak için kullanılabilir. Her ikisi de taşabilir - ve görüntü kaptan küçükse yine de ortalanır.

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

Yöntem 3 "çift sarıcı" (IE8 + - FF DEĞİL!):

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

Yöntem 4 "çift sarıcı VE çift görüntü" (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/

• Yöntem 1'in biraz daha iyi desteği var - görüntünün genişliğini VEYA yüksekliğini ayarlamanız gerekiyor!
• Öneklerle yöntem 2'nin de iyi desteği vardır (ie9'dan itibaren) - Yöntem 2'nin Opera mini'de desteği yoktur!
• Yöntem 3 iki sargı kullanır - genişlik VE yükseklik taşabilir.
• Yöntem 4, bir çift görüntü (bir yer tutucu olarak) kullanır, bu da bazı ek bant genişliği ek yükü sağlar, ancak daha iyi çapraz tarama desteği sağlar.

Yöntem 1 ve 3, Firefox ile çalışmıyor gibi görünüyor

Başka bir çözüm, görüntüyü istenen genişlik ve yükseklikte bir kaba koymaktır. Bu yöntemi kullanarak, görüntüyü bir öğenin arka plan görüntüsü olarak ayarlamanız gerekmez.

Ardından bunu bir imgetiketle yapabilir ve öğe üzerinde bir maksimum genişlik ve maksimum yükseklik ayarlayabilirsiniz.

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>

Artık kabın boyutunu değiştirdiğinizde, görüntü sınırların dışına çıkmadan veya bozulmadan otomatik olarak olabildiğince büyür.

İsterseniz görüntüyü ortalamak dikey ve yatay Kapsayıcı css için değiştirebilirsiniz:

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

İşte bir JS Fiddle http://jsfiddle.net/9kUYC/2/

@Dominic Green'in jQuery kullanarak yanıtını temel alarak, yüksek veya geniş olduklarından daha geniş görüntüler için çalışması gereken bir çözüm.

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

Muhtemelen JavaScript yapmanın daha zarif bir yolu vardır, ancak bu işe yarar.

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();

• Css arka planını kullanmamak
• Sadece 1 bölmek için div
• Doğru en boy oranını korumak yerine minimum genişliğe yeniden boyutlandırıldı
• Merkezden kırp (dikey ve yatay olarak, üst, sol ve dönüştür ile ayarlayabilirsiniz)

Bir tema veya başka bir şey kullanıyorsanız dikkatli olun, genellikle img max-width değerini% 100 olarak bildirirler. Hiçbir şey yapmamalısın. Test edin :)

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

Bir jQuery eklentisi olarak adlandırılan yapı yardımcı Fillmore kolları, background-size: coverbunu destekleyen tarayıcılarda ve bu bilmediğimiz için bir dolgu vardır. Bir bak!

Bu cevap için oldukça geç olduğunu düşünüyorum. Her neyse, bu gelecekte birine yardımcı olacağını umuyoruz. Kartları açısal olarak yerleştirmede sorunla karşılaştım. Olay dizisi için görüntülenen kartlar var. Etkinliğin görüntü genişliği kart için büyükse, görüntü iki taraftan kırpılarak ve% 100 yükseklikle gösterilmelidir. Görüntü yüksekliği uzunsa, görüntülerin alt kısmı kırpılır ve genişlik% 100 olur. İşte bunun için benim saf css çözüm:

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

Bunun gibi bir şey deneyin: http://jsfiddle.net/D7E3E/4/

Taşmalı bir kap kullanma: gizli

EDIT: @Dominic Green beni dövdü.

Bu, görüntüleri uzatmadan veya kırpmadan belirli bir boyuta dolduracaktır

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

Görüntüyü tam ekrana sığdırmak için şunu deneyin:

arka plan tekrarı: yuvarlak;

<div class="container">
     <img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>

<style>
.container {
       width: 150px;
       height: 100px;
       overflow: hidden;
}
</style>