Rozmiar obrazu CSS, jak wypełnić, a nie rozciągnąć?

Mam obraz i chcę ustawić określoną szerokość i wysokość (w pikselach)

Ale jeśli ustawię szerokość i wysokość za pomocą css ( width:150px; height:100px), obraz zostanie rozciągnięty i może być brzydki.

Jak wypełniać obrazy do określonego rozmiaru za pomocą CSS, a nie rozciągać go?

Przykład wypełnienia i rozciągnięcia obrazu:

Oryginalny obraz:

Rozciągnięty obraz:

Wypełniony obraz:

Pamiętaj, że w powyższym przykładzie wypełnionego obrazu: najpierw rozmiar obrazu jest zmieniany na 150x255 (zachowany współczynnik kształtu), a następnie przycinany do rozmiaru 150x100.

Jeśli chcesz użyć obrazu jako tła CSS, istnieje eleganckie rozwiązanie. Po prostu użyj coverlub containwe background-sizewłaściwości CSS3.

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

Podczas gdy coverotrzymasz skalowany obraz, containda ci skalowany obraz. Oba zachowają proporcje pikseli.

http://jsfiddle.net/uTHqs/ (przy użyciu okładki)

http://jsfiddle.net/HZ2FT/ (przy użyciu zawierają)

Takie podejście ma tę zaletę, że jest przyjazne dla wyświetlaczy Retina zgodnie z krótkim przewodnikiem Thomasa Fuchsa.

Warto wspomnieć, że obsługa przeglądarki dla obu atrybutów wyklucza IE6-8.

Możesz użyć właściwości css 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" />

Zobacz przykład tutaj

Dla IE istnieje polifill: https://github.com/anselmh/object-fit

Wzmocnienie na powyższym Odpowiedź @afonsoduarte ( NOT Przyjęty jeden) .
w przypadku korzystania z bootstrap

1. Zapewnienie width:100%stylu.
   Jest to przydatne, jeśli używasz bootstrap i chcesz, aby obraz rozciągał się na całą dostępną szerokość.
   

2. Określenie heightwłaściwości jest opcjonalne. Możesz ją usunąć / zachować w razie potrzeby

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

3. Nawiasem mówiąc, nie ma potrzeby podawania atrybutów heighti elementu, ponieważ zostaną one przesłonięte przez styl. więc wystarczy napisać coś takiego.widthimage
   

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

Jedynym prawdziwym sposobem jest umieszczenie wokół obrazu pojemnika i użycie 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 sprawia problemy, gdy chcesz robić to, co chcesz i wyśrodkowować obraz, w jquery można szybko naprawić:

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/

Rozwiązanie CSS bez JS i bez obrazu tła:

Metoda 1 „margin auto” (IE8 + - NIE 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/

Metoda 2 „transformacja” (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/

Metodę 2 można wykorzystać do wyśrodkowania obrazu w pojemniku o stałej szerokości / wysokości. Oba mogą się przepełnić - a jeśli obraz jest mniejszy niż pojemnik, nadal będzie wyśrodkowany.

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

Metoda 3 „podwójne opakowanie” (IE8 + - NIE 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/

Metoda 4 „podwójne opakowanie ORAZ podwójny obraz” (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/

• Metoda 1 ma nieco lepsze wsparcie - musisz ustawić szerokość LUB wysokość obrazu!
• Z prefiksami metoda 2 ma również przyzwoite wsparcie (od wersji 9 w górę) - Metoda 2 nie obsługuje Opery mini!
• Metoda 3 wykorzystuje dwa owijarki - może przepełnić szerokość ORAZ wysokość.
• Metoda 4 wykorzystuje podwójny obraz (jeden jako symbol zastępczy), co zapewnia dodatkowe obciążenie przepustowości, ale jeszcze lepszą obsługę przeglądarki.

Wydaje się, że metody 1 i 3 nie działają z Firefoksem

Innym rozwiązaniem jest umieszczenie obrazu w pojemniku o pożądanej szerokości i wysokości. Korzystając z tej metody, nie musisz ustawiać obrazu jako obrazu tła elementu.

Następnie możesz to zrobić za pomocą imgznacznika i po prostu ustawić maksymalną szerokość i maksymalną wysokość elementu.

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>

Teraz, gdy zmienisz rozmiar kontenera, obraz automatycznie powiększy się tak bardzo, jak to możliwe, bez wychodzenia poza granice i zniekształcania.

Jeśli chcesz wyśrodkować obraz w pionie i poziomie, możesz zmienić css kontenera na:

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

Oto JS Fiddle http://jsfiddle.net/9kUYC/2/

Opierając się na odpowiedzi @Dominic Green za pomocą jQuery, oto rozwiązanie, które powinno działać dla obrazów, które są albo szersze niż są wysokie, albo wyższe niż są szerokie.

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

Prawdopodobnie istnieje bardziej elegancki sposób obsługi JavaScript, ale to działa.

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

• Nie używa tła css
• Tylko 1 div, aby go przyciąć
• Przeskalowano do minimalnej szerokości, aby zachować właściwy współczynnik kształtu
• Kadrowanie od środka (w pionie i poziomie, możesz to dostosować za pomocą góry, lewej i transformacji)

Zachowaj ostrożność, jeśli używasz motywu lub czegoś innego, często deklarują img maksymalną szerokość na 100%. Nie musisz nic robić. Przetestuj to :)

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

Pomogłem zbudować wtyczkę jQuery o nazwie Fillmore , która obsługuje background-size: coverprzeglądarki, które ją obsługują, i ma pewien podkład dla tych, którzy tego nie robią. Spójrz!

Myślę, że na tę odpowiedź jest już późno. W każdym razie mam nadzieję, że pomoże to komuś w przyszłości. Napotkałem problem z ustawieniem kart pod kątem. Wyświetlane są karty dla szeregu zdarzeń. Jeśli szerokość obrazu zdarzenia jest duża dla karty, obraz powinien zostać pokazany przez przycięcie z dwóch stron i wysokość 100%. Jeśli wysokość obrazu jest długa, dolna część obrazu jest przycinana, a szerokość wynosi 100%. Oto moje czyste rozwiązanie CSS:

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

Spróbuj czegoś takiego: http://jsfiddle.net/D7E3E/4/

Używanie kontenera z przepełnieniem: ukryty

EDYCJA: @Dominic Green mnie pokonał.

Spowoduje to wypełnienie zdjęć do określonego rozmiaru, bez rozciągania lub przycinania

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

Aby dopasować obraz do pełnego ekranu, spróbuj:

powtórzenie w tle: okrągłe;

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

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