Jak automatycznie zmienić rozmiar dużego obrazu, aby zmieścił się w pojemniku div o mniejszej szerokości, zachowując jednocześnie jego stosunek szerokości do wysokości?

Przykład: stackoverflow.com - kiedy obraz jest wstawiany do panelu edytora, a obraz jest zbyt duży, aby zmieścił się na stronie, obraz jest automatycznie zmieniany.

Nie stosuj wyraźnej szerokości lub wysokości do znacznika obrazu. Zamiast tego podaj:

max-width:100%;
max-height:100%;

Ponadto, height: auto;jeśli chcesz określić tylko szerokość.

Przykład: http://jsfiddle.net/xwrvxser/1/

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

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

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

dopasowanie obiektowe

Okazuje się, że jest na to inny sposób.

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

wykona pracę. To CSS 3.

Fiddle: http://jsfiddle.net/mbHB4/7364/

Obecnie nie ma sposobu, aby zrobić to poprawnie w sposób deterministyczny, stosując obrazy o stałym rozmiarze, takie jak pliki JPEG lub PNG.

Aby proporcjonalnie zmienić rozmiar obrazu, musisz ustawić albo wysokość, albo szerokość na „100%”, ale nie oba jednocześnie. Jeśli ustawisz oba na „100%”, obraz zostanie rozciągnięty.

Wybór wysokości lub szerokości zależy od obrazu i wymiarów pojemnika:

1. Jeśli zarówno obrazek, jak i pojemnik mają zarówno „portret”, jak i oba „krajobraz” (odpowiednio wyższe niż są szerokie lub szersze niż są wysokie), nie ma znaczenia, która z wysokości lub szerokości ma wartość „% 100” .
2. Jeśli twój obraz jest pionowy, a pojemnik jest poziomy, musisz ustawić height="100%"obraz.
3. Jeśli obraz jest poziomy, a pojemnik jest pionowy, musisz ustawić width="100%"obraz.

Jeśli obraz jest plikiem SVG, który jest formatem wektorowym o zmiennej wielkości, możesz automatycznie dopasować rozszerzenie do kontenera.

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

height
width
viewbox

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

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

Treść HTML:

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

Treść 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!

Daj kontenerowi stały, height a następnie imgtag wewnątrz, ustaw widthi max-height.

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

Różnica polega na tym, że ustawiłeś na width100%, a nie na max-width.

Piękny hack.

Istnieją dwa sposoby na sprawienie, by 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 tutaj

2. Gdy obraz jest w imgznaczniku.

#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 tutaj

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

background-size: cover;

Będzie to „skalowanie obrazu tła, aby być tak duży, jak to możliwe, że obszar tła jest całkowicie pokryte przez obraz tła Niektóre części obrazu tła nie może być w widoku w obszarze pozycjonowania tle.” - W3Schools

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

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

Biorąc pod uwagę taki HTML:

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

kod CSS to:

.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

Stosowanie:

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 pojemnik, ale wycina 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 sugerowało dopasowanie obiektu, co jest dobrą opcją. Ale jeśli chcesz, aby działał również w starszych przeglądarkach , istnieje inny sposób na zrobienie tego z łatwością.

To dość proste. Podjąłem podejście polegające na umieszczeniu obrazu w pojemniku z wartością bezwzględną, a następnie umieszczeniu go dokładnie na środku za pomocą kombinacji:

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

Gdy znajdzie się w centrum, 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%;

Dzięki temu obraz uzyskuje efekt Object-fit: cover.

Oto demonstracja powyższej logiki.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Ta logika działa we wszystkich przeglądarkach.

Następujące 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 korzystania z JavaScript. Jest w pełni responsywny i często go używam. Często trzeba dopasować obraz o dowolnym współczynniku kształtu do elementu kontenera o określonym współczynniku kształtu. Konieczne jest posiadanie w pełni responsywnego rozwiązania.

/* 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żesz 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 także ustawić obraz tak, aby był wyrównany według własnego uznania (na przykład w przypadku obrazu produktu na nieskończonym białym tle możesz łatwo ustawić go na środku dołu).

Podaj potrzebną wysokość i szerokość obrazu div, który zawiera znacznik <img>. Nie zapomnij podać wysokości / szerokości w odpowiednim znaczniku stylu.

W znaczniku <img> podaj max-heighti max-widthjako 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 po tym, jak dobrze to zrobisz.

Poniższy kod jest dostosowany do poprzednich odpowiedzi i jest testowany przeze mnie za pomocą obrazu o nazwie storm.jpg .

Jest to pełny kod HTML prostej strony wyświetlającej obraz. To działa idealnie i zostało przetestowane przeze mnie na stronie www.resizemybrowser.com. Umieść kod CSS na górze kodu HTML, pod sekcją head. Umieść kod obrazu w dowolnym miejscu.

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

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

Musisz podać przeglądarce wysokość miejsca, w którym ją umieszczasz:

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

Edycja: poprzednie pozycjonowanie obrazu na podstawie tabeli miało problemy w Internet Explorerze 11 ( max-heightnie działa w display:tableelementach). Zastąpiłem go pozycjonowaniem opartym na inline, które nie tylko działa dobrze zarówno w Internet Explorerze 7, jak i Internet Explorerze 11, ale wymaga również mniej kodu.

Oto moje zdanie na ten temat. Działa to tylko wtedy, gdy kontener ma określony rozmiar ( max-widthi max-heightwydaje się, że nie dogaduje się 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 picture-frameklasę i px125klasa wielkości 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 */
}

I w HTML:

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

PRÓBNY

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

Edycja: Możliwe dalsze ulepszenia przy użyciu JavaScript (skalowanie obrazów):

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

Rozwiązałem ten problem za pomocą 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%;
}

Jak tu odpowiedziano , możesz także użyć vhjednostek zamiast, max-height: 100%jeśli nie działa w przeglądarce (np. Chrome):

img {
    max-height: 75vh;
}

Wyśrodkowałem i skalował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;
}

Został przetestowany w przeglądarce Internet Explorer, Firefox i Safari.

Więcej informacji na temat centrowania znajduje się tutaj .

Akceptowana odpowiedź od Thorn007 nie działa, gdy obraz jest zbyt mały .

Aby rozwiązać ten problem, dodałem współczynnik skali . W ten sposób powiększa obraz i wypełnia pojemnik 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. W przypadku WebKit musisz dodać -webkit-transform:scale(4); -webkit-transform-origin:left top; styl.
2. Przy współczynniku skali 4 masz maksymalną szerokość = 400/4 = 100 i maksymalną wysokość = 200/4 = 50
3. Alternatywnym rozwiązaniem jest ustawienie maksymalnej szerokości i maksymalnej wysokości na 25%. To jest jeszcze prostsze.

Jeśli używasz Bootstrap, wystarczy dodać img-responsiveklasę do imgtagu:

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

Obrazy ładowania początkowego

Proste rozwiązanie (poprawka 4-krokowa !!), które wydaje mi się działać, jest poniżej. W przykładzie użyto szerokości, aby określić całkowity rozmiar, ale można także odwrócić ją, aby użyć wysokości.

1. Zastosuj styl CSS do kontenera obrazu (na przykład <img>)
2. Ustaw właściwość width na żądany wymiar
   • W przypadku wymiarów użyj %do względnego rozmiaru lub automatycznego skalowania (na podstawie kontenera obrazu lub wyświetlacza)
   • Użyj px(lub innego) dla statycznego lub ustaw wymiar
3. Ustaw właściwość wysokość, aby automatycznie dostosowywała się na podstawie szerokości
4. CIESZYĆ SIĘ!

Na przykład,

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

Wszystkie udzielone odpowiedzi, w tym zaakceptowana, działają tylko przy założeniu, że divopakowanie ma stały rozmiar. Oto jak to zrobić bez względu na rozmiardivOto opakowania i jest to bardzo przydatne, jeśli opracujesz responsywną stronę:

Zapisz te deklaracje w swoim DIVselektorze:

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

Następnie umieść te deklaracje w swoim IMGselektorze:

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

BARDZO WAŻNE:

Wartość maxHeightmusi być taka sama dla selektorów DIVi IMG.

Prostym rozwiązaniem jest użycie Flexbox. Zdefiniuj CSS kontenera, aby:

.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 pojemniku z zachowanymi wymiarami.

Rozwiązanie jest proste z odrobiną matematyki ...

Wystarczy umieścić 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.

Załóżmy na przykład, że masz obraz o szerokości 200 pikseli i wysokości 160 pikseli. Można śmiało powiedzieć, że wartość szerokości wyniesie 100%, ponieważ jest to większa wartość. Aby następnie obliczyć wartość wysokości, wystarczy podzielić wysokość przez szerokość, która 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 img-responsiveklasę 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.