Poniższe rozwiązania umożliwiają skalowanie w górę i w dół obrazu , w zależności od szerokości pola nadrzędnego.

Wszystkie obrazy mają kontener nadrzędny o stałej szerokości Tylko do celów demonstracyjnych . W produkcji będzie to szerokość pola nadrzędnego.

Najlepsza Praktyka (2018):

To rozwiązanie nakazuje przeglądarce renderowanie obrazu z maksymalną dostępną szerokością i dostosowanie wysokości jako procent tego szerokość.

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

Rozwiązanie:

Dzięki bardziej fantazyjnemu rozwiązaniu możesz kadrować obraz bez względu na jego rozmiar i dodać kolor tła, aby skompensować kadrowanie.

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

Dla linii określającej padding, musisz obliczyć współczynnik proporcji obrazu, na przykład:

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

Top padding = 34.37%.

Zmagałem się z tym problemem dość ciężko i ostatecznie doszedłem do tego prostego rozwiązania:

object-fit: cover;
width: 100%;
height: 250px;

Możesz dostosować szerokość i wysokość do swoich potrzeb, a właściwość obiekt-fit wykona kadrowanie za Ciebie.

Właściwość background-size to tylko ie > = 9, ale jeśli ci to nie przeszkadza, możesz użyć div z background-image i ustawić background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Teraz możesz po prostu ustawić rozmiar div na jaki chcesz i nie tylko obraz zachowa swój współczynnik proporcji, ale także będzie scentralizowany zarówno pionowo, jak i poziomo w div. Po prostu nie zapomnij ustawić rozmiarów w css, ponieważ div nie mają atrybutu width/height na samym znaczniku.

To podejście jest INNE niż odpowiedź setecs, za pomocą tej opcji obszar obrazu będzie stały i zdefiniowany przez Ciebie (pozostawiając puste przestrzenie poziomo lub pionowo w zależności od rozmiaru div I proporcji obrazu), podczas gdy odpowiedź setecs zapewni Ci pudełko dokładnie o rozmiarze skalowanego obrazu (bez pustych spacji).

Edytuj: Zgodnie z dokumentacją MDN background-size można symulować właściwość background-size w IE8, używając zastrzeżonej deklaracji filtra:

Chociaż Internet Explorer 8 nie obsługuje właściwości background-size, możliwe jest emulowanie niektórych jej funkcji za pomocą niestandardowej funkcji-ms-filter:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

Bardzo podobne do niektórych odpowiedzi tutaj, ale w moim przypadku miałem obrazy, które czasami były wyższe, czasami większe.

Ten styl działał jak urok, aby upewnić się, że wszystkie obrazy wykorzystują całą dostępną przestrzeń, zachowując proporcje, a nie cięcia:

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

Usuń właściwość "wysokość".

<img src="big_image.jpg" width="900" alt=""/>

Określając oba, zmieniasz proporcje obrazu. Samo ustawienie jednego zmieni rozmiar, ale zachowa proporcje.

Opcjonalnie, aby ograniczyć przekroczenia:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Po prostu dodaj to do css, automatycznie zmniejszy się i rozszerzy z zachowaniem oryginalnego stosunku.

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

Nie ma standardowego sposobu zachowania proporcji dla obrazów z width, height i max-width określone razem.

Jesteśmy więc zmuszeni albo podać width i height, aby zapobiec "skokom" strony podczas ładowania obrazów, albo użyć max-width i nie podawać wymiarów dla obrazów.

Podanie tylko width (Bez height) zazwyczaj nie ma większego sensu, ale możesz spróbować nadpisać atrybut height HTML, dodając regułę podobną do IMG {height: auto; } do swojego arkusza stylów.

Zobacz też powiązane Firefox błąd 392261.

Ustaw klasę CSS znacznika kontenera obrazu na image-class:

<div class="image-full"></div>

I dodaj ten arkusz stylów CSS.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

Https://jsfiddle.net/sot2qgj6/3/

Oto odpowiedź, jeśli chcesz umieścić obraz z stały procent szerokości , ale nie stały piksel szerokości.

I będzie to przydatne w przypadku różnej wielkości ekranu.

Sztuczki są

1. użycie padding-top do ustawienia wysokości od szerokości.
2. Użycie position: absolute do umieszczenia obrazu w przestrzeni wypełnienia.
3. użycie max-height and max-width, aby upewnić się, że obraz nie będzie nad rodzicem element.
4. użycie display:block and margin: auto do wyśrodkowania obrazu.

Skomentowałem też większość trików wewnątrz skrzypiec.

prosty css za pomocą tła http://jsfiddle.net/4660s79h/2/

tło-obrazek ze słowem na top http://jsfiddle.net/4660s79h/1/

Koncepcja użycia position absolute pochodzi stąd http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Aby zachować responsywny obraz, a jednocześnie wymusić, aby obraz miał określony współczynnik proporcji, możesz wykonać następujące czynności:

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

I SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

Można tego użyć, aby wymusić określony współczynnik proporcji, niezależnie od rozmiaru obrazu, który autorzy przesyłają.

Dzięki @ Kseso w http://codepen.io/Kseso/pen/bfdhg . sprawdź ten adres URL, aby uzyskać więcej wskaźników i działający przykład.

Możesz utworzyć div w następujący sposób:

<div class="image" style="background-image:url('/to/your/image')"></div>

I użyj tego css do stylizacji:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

Możesz użyć tego:

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Aby wymusić obraz, który pasuje do dokładnego rozmiaru, nie musisz pisać zbyt wielu kodów. It ' s so simple

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

Spowoduje to, że obraz zmniejszy się, jeśli jest zbyt duży dla określonego obszaru (jako minus, nie powiększy obrazu).

Rozwiązanie firmy setec jest dobre dla "Shrink to Fit"w trybie auto. Aby jednak optymalnie rozwinąć się, aby zmieścić się w trybie "auto", musisz najpierw umieścić odebrany obraz w identyfikatorze tymczasowym, Sprawdź, czy może być rozszerzony na wysokość lub szerokość (w zależności od proporcji proporcji v / S proporcji twojego bloku wyświetlacza),

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

To podejście jest przydatne, gdy otrzymane obrazy są mniejszy niż display box. Musisz zapisać je na swoim serwerze w oryginalnym małym rozmiarze, a nie ich rozszerzonej wersji, aby wypełnić większe pole wyświetlania, aby zaoszczędzić na rozmiarze i przepustowości.

img {
  max-width: 80px; /* Also works with percentage value like 100% */
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

<p>Let's say the author of the HTML deliberately wants
  the height to be half the value of the width,
  this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">

Może użyjesz pseudo elementu do wyrównania w pionie? Ten mniej kod jest dla karuzeli, ale chyba działa na każdym kontenerze o stałym rozmiarze. Zachowa proporcje i wstaw @szaro-ciemne paski na górze / dole lub w lewo / zapis dla najkrótszego wymiaru. W międzyczasie obraz jest wyśrodkowany poziomo przez text-align i pionowo przez pseudo element.

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }