obiekt-fit

<img style='height: 100%; width: 100%; object-fit: contain'/>

Http://jsfiddle.net/mbHB4/7364/

Obecnie nie ma sposobu, aby zrobić to poprawnie w deterministyczny sposób, z obrazami o stałych rozmiarach, takimi jak pliki JPEG lub PNG.

Aby zmienić rozmiar obrazu proporcjonalnie, musisz ustawić albo wysokość lub szerokość na "100%", ale nie oba. Jeśli ustawisz oba na "100%", Twój obraz zostanie rozciągnięty.

Wybór wysokości lub szerokości zależy od rozmiaru obrazu i kontenera:

1. jeśli obraz i kontener są zarówno "w kształcie portretu", jak i oba "ukształtowane krajobrazowo" (odpowiednio wyższe niż są szerokie lub szersze niż są wysokie), wtedy nie ma znaczenia, która z wysokości lub szerokości jest "%100".
2. jeśli obraz jest pionowy, a kontener jest krajobrazowy, musisz ustawić height="100%" na obrazie.
3. jeśli obraz jest krajobrazowy, a kontener pionowy, musisz ustawić width="100%" na obrazie.

Jeśli obraz jest SVG, który jest formatem wektorowym o zmiennej wielkości, możesz mieć rozszerzenie pasujące do kontener odbywa się automatycznie.

Musisz tylko upewnić się, że plik SVG nie ma żadnej z tych właściwości ustawionych w znaczniku <svg>:

height
width
viewbox

Większość programów do rysowania wektorowego ustawia te właściwości podczas eksportowania pliku SVG, więc będziesz musiał ręcznie edytować plik za każdym razem, gdy go eksportujesz, lub napisać skrypt.

Oto rozwiązanie, które będzie zarówno pionowo, jak i poziomo wyrównać Twój img w div bez rozciągania, nawet jeśli dostarczony obraz jest zbyt mały lub zbyt duży, aby zmieścić się w div.

Zawartość HTML:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

Zawartość CSS:

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

Część jQuery:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

Uprość to!

Nadaj kontenerowi stałe height a następnie dla znacznika img wewnątrz niego ustaw width i max-height.

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

Różnica polega na tym, że ustawiasz width na 100%, a nie max-width.

Piękny hack.

Masz dwa sposoby, aby obraz był responsywny.

1. gdy obraz jest obrazem tła.

#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

Uruchom to tutaj

1. gdy obraz jest w img tag.

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Uruchom to tutaj

Możesz ustawić obrazek jako tło na div, a następnie użyć właściwości CSS background-size :

background-size: cover;

"skaluje obraz tła tak, aby był jak największy, aby obszar tła był całkowicie pokryty obrazem tła. Niektóre części obrazu tła mogą nie być widoczne w obszarze pozycjonowania w tle" -- W3Schools

Zobacz moje rozwiązanie: http://codepen.io/petethepig/pen/dvFsA

Jest napisany czystym CSS, bez kodu JavaScript. Może obsługiwać obrazy o dowolnym rozmiarze i dowolnej orientacji.

Podany taki HTML:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

Kod CSS będzie:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

Właśnie opublikowałem wtyczkę jQuery, która robi dokładnie to, czego potrzebujesz z wieloma opcjami:

Https://github.com/GestiXi/image-scale

Użycie:

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JavaScript

$(function() {
    $("img.scale").imageScale();
});

To rozwiązanie nie rozciąga obrazu i wypełnia cały kontener, ale tnie część obrazu.

HTML:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}

Widzę, że wiele osób zasugerowało dopasowanie obiektu co jest dobrą opcją. Ale jeśli chcesz, aby działał również w starszych przeglądarkach , jest inny sposób, aby to zrobić łatwo.

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Gdy jest w środku, daję obrazowi,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

To sprawia, że obraz staje się efekt dopasowania obiektu: pokrycie.

Oto demonstracja powyższej logiki.

Https://jsfiddle.net/furqan_694/s3xLe1gp/

Ta logika działa we wszystkich przeglądarkach.

Poniższe działa dla mnie idealnie:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

Mam znacznie lepsze rozwiązanie bez potrzeby stosowania JavaScript. Jest w pełni responsywny i często go używam. Często konieczne jest dopasowanie obrazu o dowolnym współczynniku proporcji do elementu kontenera o określonym współczynniku proporcji. A to wszystko musi być w pełni responsywne.

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}

<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

Można ustawić maksymalną szerokość i maksymalną wysokość niezależnie; obraz będzie respektował najmniejszy (w zależności od wartości i proporcji obrazu). Możesz również ustawić obraz jako wyrównane jak chcesz (na przykład dla obrazu produktu na nieskończonym białym tle można łatwo ustawić go na środku dołu).

Naprawiłem ten problem używając następującego kodu:

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>

Jako odpowiedź tutaj, Możesz również użyć jednostek vh zamiast max-height: 100%, jeśli nie działa to na Twojej przeglądarce (np. Chrome):

img {
    max-height: 75vh;
}

Wyśrodkowałem i przeskalowałem proporcjonalnie obraz wewnątrz hiperłącza zarówno w poziomie, jak i w pionie w ten sposób:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

Więcej informacji o centrowaniu znajduje się tutaj .

Podaj wysokość i szerokość potrzebne do obrazu do div, który zawiera znacznik . Nie zapomnij podać wysokości / szerokości w odpowiednim znaczniku stylu.

W tagu podaj max-height i max-width jako 100%.

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

Możesz dodać szczegóły w odpowiednich klasach, gdy już to zrobisz.

Poniższy kod jest zaadaptowany z poprzednich odpowiedzi i jest testowany przeze mnie za pomocą obrazka o nazwie storm.jpg.

Jest to kompletny kod HTML dla prostej strony, która wyświetla obraz. Działa idealnie i został przetestowany przeze mnie z www.resizemybrowser.com. umieść kod CSS na górze kodu HTML, pod sekcją head. Umieść kod obrazu gdziekolwiek chcesz obraz.

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

Musisz podać przeglądarce wysokość, gdzie ją umieszczasz:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Edit: poprzednie pozycjonowanie obrazów oparte na tabelach miało problemy w Internet Explorerze 11 (max-height nie działa w elementach display:table). Zastąpiłem go pozycjonowaniem inline, które nie tylko działa dobrze zarówno w Internet Explorer 7 i Internet Explorer 11, ale również wymaga mniej kodu.

Oto moje spojrzenie na ten temat. Będzie działać tylko wtedy, gdy kontener ma określony rozmiar (max-width i max-height nie wydają się dogadywać z kontenerami, które nie mają konkretnego rozmiaru), ale Napisałem zawartość CSS w sposób, który pozwala na jej ponowne użycie (Dodaj klasę picture-frame i klasę px125 size do istniejącego kontenera).

W CSS:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

Oraz w HTML:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

DEMO

/* Main style */

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}

<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

Edit: możliwe dalsze ulepszenia przy użyciu JavaScript (upscaling images):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

Zaakceptowana odpowiedź od Thorn007 nie działa, gdy obraz jest za mały .

Aby to rozwiązać, dodałem współczynnik skali . W ten sposób obraz staje się większy i wypełnia kontener div.

Przykład:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

Uwagi:

1. dla WebKit musisz dodać -webkit-transform:scale(4); -webkit-transform-origin:left top; w stylu.
2. przy współczynniku skali 4, masz max-szerokość = 400/4 = 100 i max-wysokość = 200/4 = 50
3. alternatywnym rozwiązaniem jest ustawienie maksymalnej szerokości i max-wysokość 25%. To jeszcze prostsze.

Proste rozwiązanie(4-stopniowa naprawa!!) to wydaje się działać dla mnie, jest poniżej. W przykładzie używa się szerokości do określenia ogólnego rozmiaru, ale można go również odwrócić, aby użyć wysokości.

1. Zastosuj styl CSS do kontenera obrazu (na przykład )
2. ustaw właściwość width na żądany wymiar
   • dla wymiarów, użyj % dla rozmiaru względnego lub automatycznego skalowania (na podstawie kontenera obrazu lub wyświetlacza)
   • Użyj px (lub innego) dla statycznego, lub zestawu Wymiar
3. ustaw właściwość height, aby automatycznie dopasować, na podstawie szerokości
Smacznego!

Na przykład,

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

Wszystkie odpowiedzi, łącznie z zaakceptowaną, działają tylko przy założeniu, że opakowanie div ma ustalony rozmiar. Tak więc to jest jak to zrobić niezależnie od wielkości opakowania div i jest to bardzo przydatne, jeśli stworzysz responsywną stronę:

Napisz te deklaracje w swoim DIV selektor:

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

Następnie umieścić te deklaracje w swoim IMG selektor:

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

Bardzo Ważne:

Wartość maxHeight musi być taka sama dla obu DIV oraz IMG selektory.

Prostym rozwiązaniem jest użycie flexbox. Zdefiniuj CSS kontenera na:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

Dostosuj szerokość zawartego obrazu do 100% i powinieneś uzyskać ładny wyśrodkowany obraz w kontenerze z zachowanymi wymiarami.

Jeśli używasz Bootstrap, wystarczy dodać klasę img-responsive do tagu img:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Zdjęcia Bootstrap

Rozwiązanie jest łatwe z odrobiną matematyki...

Po prostu umieść obraz w div, a następnie w pliku HTML, w którym określasz obraz. Ustaw wartości szerokości i wysokości w procentach, używając wartości pikseli obrazu, aby obliczyć dokładny stosunek szerokości do wysokości.

Na przykład, powiedzmy, że masz obraz o szerokości 200 pikseli i wysokości 160 pikseli. Można śmiało powiedzieć, że wartość szerokość będzie 100%, ponieważ jest to większa wartość. Aby następnie obliczyć wysokość wartość po prostu podziel wysokość przez szerokość, co daje wartość procentową 80%. W kodzie będzie to wyglądało mniej więcej tak...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

Najprostszym sposobem na to jest użycie object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Jeśli używasz Bootstrap, po prostu dodaj klasę img-responsive i zmień na

.container img{
    object-fit: cover;
}

Sprawdź moją odpowiedź, spraw, aby obraz był responsywny-najprostszy sposób -

img{
    width: 100%;
    max-width: 800px;
}

Lub możesz po prostu użyć:

background-position:center;
background-size:cover;

Teraz obraz zajmie całą przestrzeń div.