Jak automatycznie zmienić rozmiar obrazu, aby pasował do pojemnika „div”?

1509

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.

001
źródło
Kilka interesujących bibliotek do zmiany rozmiaru obrazu w celu dopasowania do kontenera: * plugins.jquery.com/project/myimgscale * code.google.com/p/jquery-imagefit-plugin
Frosty Z
Oprócz odpowiedzi @ Kevina ... Możesz także korzystać z usług takich jak ImageBoss, aby tworzyć zdjęcia o żądanym rozmiarze na żądanie. Umieszczanie obrazu na pojemniku jest świetne, ale responsywne podawanie obrazów jest znacznie rzadsze.
Igor Escobar
Możliwy duplikat: stackoverflow.com/questions/1891857/…
jolumg
@jolumg Niezupełnie; podczas gdy niektóre rozwiązania nakładają się na siebie, istnieje również wiele rozwiązań, które nie są wymienne, ponieważ ten pyta, jak skalować obraz w górę, podczas gdy ten wymaga skalowania obrazu w dół.
TylerH
1
001 - To jest odpowiedź na twoje pytanie, które zostało zamknięte, zanim je zobaczyłem. Jak wywołać komponent podrzędny z komponentu nadrzędnego. Napisałem post na blogu wyjaśniający, w jaki sposób komunikować komponenty za pomocą interfejsów: datajugglerblazor.blogspot.com/2020/01/…
Data Juggler

Odpowiedzi:

1873

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>

Kevin
źródło
40
To nie będzie skalować zarówno wysokości, jak i szerokości.
Neil,
75
wysokość: auto; jeśli chcesz podać tylko szerokość
Roi
82
Co jeśli obraz jest za mały?
Scott Rippey,
18
@ Scott Rippey - Jeśli obraz jest mniejszy niż pojemnik, nie zmieni się, ponieważ stosowane są reguły maksymalnej szerokości i maksymalnej wysokości.
Surreal Dreams
15
<a>Obraz z dołączonym tagiem nie zmienił rozmiaru. Zastosowanie reguł do znacznika A rozwiązało ten problem.
SPRBRN
432

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/

Shih-Min Lee
źródło
39
Spowoduje to przeskalowanie obrazu w celu dopasowania go do większego wymiaru całkowicie w pojemniku, więc mniejszy wymiar może nie pokryć go całkowicie. Aby zamiast tego przyciąć większy wymiar, użyjobject-fit: cover
Gabriel Grant,
4
Pracowałem dla mnie - w porównaniu do rozwiązania @KevinD - to NIE zmieniło proporcji w przypadkach krawędzi. Twoje zdrowie!
Barnabas Kecskes
9
Będzie świetnie, gdy będzie w pełni obsługiwany. Niestety, ani IE, ani Edge nie obsługują go niestety.
spectras
2
Jeśli chcesz ustawić maksymalną szerokość i maksymalną wysokość, możesz to zrobić. Działa świetnie .
Sandip Subedi
3
Wydaje się, że nie można go używać z IE11 i Edge 14/15
mcorbe
106

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

Neil
źródło
2
Czy to tylko ja, czy jest kilka błędów w tym poście? „„ w kształcie portretu ”lub oba„ w kształcie krajobrazu ”(odpowiednio szersze niż są wysokie i wyższe niż są szerokie)„… czy nie należy zmieniać waszych „szacunków”? A w punktach 2 i 3 wypunktowano oba: „musisz ustawić szerokość =„ 100% ”na obrazie”. Domyślam się, że wkleiłeś / aś kopię i zapomniałeś zmienić jedną z nich na „wysokość” zamiast „szerokość”.
Buttle Butkus,
Właśnie to naprawiłem. 2 i 3 mogą być teraz zarówno błędne, jak i oba słuszne, zamiast jednego mającego rację, a drugiego mającego rację. Nie pamiętam, jaka jest prawidłowa odpowiedź. ;)
Neil
2
„Obecnie nie ma sposobu, aby zrobić to poprawnie w sposób deterministyczny, stosując obrazy o stałej wielkości, takie jak pliki JPEG lub PNG.”? To wydaje się po prostu nieprawidłowe. Odpowiedź Thorn007 zapewnia taki sposób i sam go wykorzystałem - stackoverflow.com/questions/12259736/…
Dan Dascalescu,
@DanDascalescu Odpowiedź Thorn007 nie rozwija obrazu, jeśli jest on mniejszy niż kontener. Najlepszym obecnie rozwiązaniem jest użycie elementu z obrazem tła i ustawieniem background-size: contain.
Kevin Borders
„Aby proporcjonalnie zmienić rozmiar obrazu, musisz ustawić wysokość lub szerokość na„ 100% ”, ale nie na oba.” <Właśnie to mi pomogło. Dziękuję
Alexander Santos,
77

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);
    }
Humble Rumble
źródło
1
CSS działa dokładnie tak, jak chcę, i pominąłem bit jQuery
bkwdesign
48

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.

Mehdi Maghrooni
źródło
2
Powoduje to zmianę współczynnika obrazu w Google Chrome, jeśli obraz jest bardzo wysoki, a rzutnia jest krótka.
Mikko Rantalainen,
29

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


Ale należy stosować imgtag umieścić obrazów jak to lepiej niż background-imagepod względem SEO , jak można napisać słowo kluczowe w alttego imgtagu. Oto, jak możesz sprawić, by obraz był responsywny.

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

Siraj Alam
źródło
22

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

Chuck wysycha
źródło
Uważam, że przez „dopasowanie pojemnika div” OP oznaczało, że obraz nie powinien rozciągać się poza element zawierający w żadnym z wymiarów. W rozwiązaniu @JonatasWalker obraz jest przycięty. W zależności od sytuacji rozwiązanie w tle może nie być semantycznie poprawne. Na przykład możesz potrzebować altwartości i takich rzeczy (chociaż możesz również dodać fikcyjny obraz, który jest niewidoczny dla technologii nie-asystujących), lub może być konieczne kliknięcie go.
Balázs
@ Balázs ah w tym przypadku byłoby prawidłowe ustawienie background-size: containi myślę, że osobiście wybrałbym obojętną trasę obrazu tylko dlatego, że nie ma tak naprawdę łatwego sposobu na zrobienie tego, co tu opisano bez JavaScript
Chuck Dries
@ChuckDries Nie jestem pewien, co masz na myśli, zaakceptowana odpowiedź rozwiązuje problem.
Balázs
22

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;
}
dmitry
źródło
2
Nie obsługuje to zbyt małych obrazów.
Josh C
1
@JoshC Co masz na myśli? Ten działa dobrze: codepen.io/petethepig/pen/maeFo
Dmitry
2
404 na zbyt małych obrazach.
Josh C
Chciałem zauważyć, że ta metoda działa również z pojemnikami o zmiennej szerokości. Niesamowita robota Dmitry!
Camilo Martin
Drobna modyfikacja i jest idealna: codepen.io/anon/pen/BoQmBw Dziękuję Dmitry.
Alqin
10

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();
});
Nicolas BADIA
źródło
10

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%;
}
Miia Klingstedt
źródło
9

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.

Furqan Rahamath
źródło
8

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;
}
Chong Lip Phang
źródło
7

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

aktimel
źródło
5

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.

AZD
źródło
5

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>
dan
źródło
5
<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>
easd
źródło
2
Gdybyś mógł dodać jakieś wyjaśnienie swojego kodu, które byłoby fajne (wiem, że masz tam kilka komentarzy, ale tylko kilka słów o tym, dlaczego / jak ta odpowiedź na pytanie sprawiłoby, że wyglądałoby to znacznie lepiej).
nazwy wyświetlanej
5

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;
}
Stóg
źródło
5

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


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) };
});
jahu
źródło
Korzystanie z tej metody ma wadę. Jeśli obraz się nie załaduje, tekst alternatywny zostanie wyświetlony w kontenerze nadrzędnym line-height. Jeśli tekst alternatywny ma więcej niż jedną linię, zacznie wyglądać naprawdę źle ...
jahu
5

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%;
}
Serkan KONAKCI
źródło
4

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;
}
gaboryczny
źródło
1
Czy masz na myślivh ? a co nie działa w Chrome?
misterManSam
@misterManSam Tak, dziękuję bardzo, byłem zbyt zmęczony wczoraj, kiedy opublikowałem tę odpowiedź. max-height: xx%(jednostka procentowa) nie działa w Chrome z niektórymi elementami img, ale vhjednostka działa. Jednak procenty pracować height, width, max-width, itd.
gaborous
4

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 .

bancer
źródło
4

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.
użytkownik217447
źródło
1
To nie jest bardzo niezawodne rozwiązanie, jeśli próbujesz wesprzeć cały rynek. Unikam CSS3, chyba że masz zamiar cofnąć się w przypadku przeglądarek, które go nie obsługują.
dudewad
3

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"
/>
młody chisango
źródło
3

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.

Billal Begueradj
źródło
1
Prawidłowa deklaracja CSS to „maksymalna wysokość” zamiast maxHeight w przypadku wielbłąda.
Mark Townsend,
3

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.

Mateo Marin
źródło
1

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>
użytkownik2796283
źródło
1

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;
}
Joseph Lariosa
źródło
-1

Lub możesz po prostu użyć:

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

Teraz obraz zajmie całą przestrzeń div.

Sharifur Robin
źródło
1
nie chodzi o dostosowanie, ale o zmianę jego rozmiaru.
Baljeetsingh