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

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