Jak zachować proporcje za pomocą tagu HTML IMG

132

Używam znacznika img w formacie HTML, aby wyświetlić zdjęcie w naszej aplikacji. Ustawiłem zarówno wysokość, jak i szerokość atrybutu na 64. Muszę pokazać dowolną rozdzielczość obrazu (np. 256x256, 1024x768, 500x400, 205x246, itp.) Jako 64x64. Ale ustawienie atrybutów wysokości i szerokości znacznika img na 64, nie zachowuje współczynnika proporcji, więc obraz wygląda na zniekształcony.

W celach informacyjnych mój dokładny kod to:

<img src="Runtime Path to photo" border="1" height="64" width="64">
html css sunil kumar
źródło
możliwy duplikat HTML / IE: rozciągnij obraz w celu dopasowania, zachowaj proporcje
Jonathon Reinhart,
Chridam, dawno już zadałem to pytanie. Opuściłem firmę, w której pracowałem nad tym wydaniem. Nie mogłem wypróbować sugerowanych rozwiązań, ponieważ pracowałem nad innymi priorytetami, aby dotrzymać terminów. Nie mogłem mieć szansy na dalsze postępy w tej sprawie.
sunil kumar

Odpowiedzi:

134

Nie ustawiaj wysokości ani szerokości. Użyj jednego lub drugiego, a zostanie zachowany prawidłowy współczynnik proporcji.

.widthSet {
    max-width: 64px;
}

.heightSet {
    max-height: 64px;
}
<img src="http://placehold.it/200x250" />

<img src="http://placehold.it/200x250" width="64" />

<img src="http://placehold.it/200x250" height="64" />

<img src="http://placehold.it/200x250" class="widthSet" />

<img src="http://placehold.it/200x250" class="heightSet" />
Rozwiń fragment

Rzepa
źródło
14
... ale co jeśli chcesz ustalić zarówno wysokość, jak i szerokość?
fatuhoku
7
Nie ma to sensu w przypadku aplikacji dynamicznych. Nie wiadomo, czy szerokość czy wysokość będą wynosić 64 piksele, ponieważ zależy to od proporcji obrazu. Dlaczego jest to odpowiedź za głosowaniem?
Królewca,
@ Mär To pytanie dotyczyło obrazów o stałej szerokości i / lub wysokości. Odpowiedź nie była wymogiem pytania.
Rzepa
3
Rozmiar jest stały, a współczynnik proporcji nie, ponieważ pytanie dotyczyło konkretnie dowolnego obrazu o dowolnej rozdzielczości. W tym rozdzielczości mniejsze niż 64x64.
Koenigsberg,
66

tutaj jest próbka

div{
   width: 200px;
   height:200px;
   border:solid
 }

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    }
<div>
  <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>
Rozwiń fragment

AKHIL P
źródło
8
Tylko uwaga dla osób, które chcą skorzystać z tego rozwiązania: dopasowywanie obiektów nie jest zbyt dobrze obsługiwane przez przeglądarki. W ogóle nie jest obsługiwany przez IE ani Edge. Źródło: caniuse.com/#feat=object-fit
Sean Dawson
2
Teraz obsługiwane w Edge 16+, patrz tabela: w3schools.com/css/css3_object-fit.asp
Eddy R.
44

Ustaw widthi heightobrazów na auto, ale ogranicz oba max-widthi max-height:

img {
    max-width:64px;
    max-height:64px;
    width:auto;
    height:auto;
}

Skrzypce

Jeśli chcesz wyświetlać obrazy o dowolnym rozmiarze w "ramkach" 64x64px, możesz użyć opakowań inline-block i ich pozycjonowania, jak w tym skrzypcach .

Ilya Streltsyn
źródło
3
Nie będzie skalować poza rozmiar oryginalny, tylko poniżej rozmiaru oryginalnego.
Koenigsberg,
40 
<img src="Runtime Path to photo"
     style="border: 1px solid #000; max-width:64px; max-height:64px;">
Lucio Fonseca
źródło
2
Jest to właściwe rozwiązanie, ponieważ pozostaje niezależne od orientacji obrazu. Rozwiązanie 3rror404 wymaga, abyś wiedział, czy obraz jest szerszy niż wysoki, czy odwrotnie.
devios1
2
również ustaw widthi heightdo auto.
Mahmoodvcs,
Właściwe rozwiązanie ograniczające zarówno wysokość, jak i szerokość.
Pavan Kumar
1
Obraz będzie przez to odpowiednio ograniczony , ale nie będzie skalowany poza swój pierwotny rozmiar. Chociaż z postu otwierającego nie jest pewne, którego z dwóch PO chciał.
Koenigsberg,
14

Żadna z wymienionych metod nie umożliwia skalowania obrazu do największego możliwego rozmiaru mieszczącego się w ramce, przy jednoczesnym zachowaniu żądanego współczynnika proporcji.

Nie można tego zrobić za pomocą tagu IMG (przynajmniej nie bez odrobiny JavaScript), ale można to zrobić w następujący sposób:

 <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>
Anonimowy tchórz
źródło
2
Tak. Użyj style="background: url('_'); background-size: cover width:_px height:_px"jako <img>tagu.
Ujjwal Singh
3
Dzięki, @UjjwalSingh. Rzeczywiście, musimy covernie containw celu maksymalizacji rozmiaru obrazu do możliwie największy. containprowadzi do „letterboxingu”.
Ortwin Gentz
4

Użyj object-fit: containatrybutu in w css html img.

Ankit Kumar Verma
źródło
3

Owiń obraz w a divo wymiarach 64x64 i ustaw width: inheritna obrazek: 

<div style="width: 64px; height: 64px;">
    <img src="Runtime path" style="width: inherit" />
</div>
Konstantin Dinev
źródło
1

Dlaczego nie użyjesz oddzielnego pliku CSS, aby zachować wysokość i szerokość obrazu, który chcesz wyświetlić? W ten sposób możesz koniecznie podać szerokość i wysokość.

na przykład: 

       image {
       width: 64px;
       height: 64px;
       }
Sahan De Silva
źródło
1

Spróbuj tego:

<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">

Dodanie object-fit = "cover" zmusi obraz do zajęcia miejsca bez utraty współczynnika proporcji.

Nick Friesen
źródło