Jak zachować proporcje podczas skalowania obrazu za pomocą jednego wymiaru (CSS) w IE6?

92

Oto problem. Mam zdjęcie:

<img alt="alttext" src="filename.jpg"/>

Uwaga, nie określono wysokości ani szerokości.

Na niektórych stronach chcę pokazać tylko miniaturę. Nie mogę zmienić html, więc używam następującego CSS:

.blog_list div.postbody img { width:75px; }

Co (w większości przeglądarek) tworzy stronę z jednakowo szerokimi miniaturami, wszystkie z zachowanymi proporcjami.

Jednak w IE6 obraz jest skalowany tylko w wymiarze określonym w CSS. Zachowuje „naturalną” wysokość.

Oto przykład pary stron, które ilustrują problem:

Byłbym bardzo wdzięczny za wszelkie sugestie, ale chciałbym zaznaczyć, że (ze względu na ograniczenia wybranej przez klienta platformy) szukam czegoś, co nie wymaga modyfikacji html. CSS byłby również lepszy niż javascript.

EDYCJA: Należy wspomnieć, że obrazy mają różne rozmiary i proporcje.

javascript css internet-explorer image internet-explorer-6 Tom Wright
źródło
Dokumentuję różne błędy. Nie mogłem tego odtworzyć. Czy myślisz, że mógłbyś zrobić z tego prosty test?
meder omuraliev
Szczerze mówiąc, nie zajmuję się już projektowaniem stron internetowych i nie jestem pewien, gdzie mógłbym bez problemu znaleźć instalację IE6. Ale ja to zareklamuję.
Tom Wright,

Odpowiedzi:

197

Adam Luter podsunął mi pomysł na to, ale okazał się naprawdę prosty:

img {
  width:  75px;
  height: auto;
}

IE6 teraz skaluje obraz dobrze i wygląda na to, że wszystkie inne przeglądarki używają tego domyślnie.

Dzięki za obie odpowiedzi!

Tom Wright
źródło
2
Polecałbym również użycie: "object-fit: include;" lub „dopasuj do obiektu: wypełnij”; jeśli to ci nie wystarcza
Magnus,
5
@Magnus zgodnie z caniuse.com dopasowanie obiektów CSS3 nie jest obsługiwane przez żadną aktualną przeglądarkę (w momencie pisania) i było obsługiwane tylko przez Operę. Prawie nie będzie działać w IE6.
Richard Hauer,
Czy powinno to działać również na odwrót? (tj. ustaw wysokość, automatyczną szerokość?) Czy to zadziała ze starymi IE?
josinalvo
14

Cieszę się, że się udało, więc myślę, że musiałeś wyraźnie ustawić „auto” w IE6, aby naśladował inne przeglądarki!

Niedawno znalazłem inną technikę skalowania obrazów, ponownie zaprojektowaną dla tła. Ta technika ma kilka interesujących cech:

  1. Zachowane są proporcje obrazu
  2. Zachowywany jest oryginalny rozmiar obrazu (to znaczy, że nigdy nie może się zmniejszyć, a tylko powiększyć)

Znacznik opiera się na elemencie opakowania:

<div id="wrap"><img src="test.png" /></div>

Biorąc pod uwagę powyższe znaczniki, stosujesz następujące zasady:

#wrap {
  height: 100px;
  width: 100px;
}
#wrap img {
  min-height: 100%;
  min-width: 100%;
}

Jeśli następnie kontrolujesz rozmiar opakowania, uzyskasz interesujące efekty skali, które wymienię powyżej.

Mówiąc wprost, rozważ następujący stan podstawowy: kontener o wymiarach 100 x 100 i obraz o wymiarach 10 x 10. W rezultacie otrzymujemy przeskalowany obraz o wymiarach 100x100.

  1. Począwszy od stanu podstawowego, rozmiar kontenera zostanie zmieniony na 20x100, rozmiar obrazu zostanie zmieniony na 100x100.
  2. Począwszy od stanu podstawowego, obraz jest zmieniany na 10x20, a rozmiar obrazu jest zmieniany na 100x200.

Innymi słowy, obraz jest zawsze co najmniej tak duży jak kontener, ale przeskaluje poza niego, aby zachować proporcje.

Prawdopodobnie nie jest to przydatne dla Twojej witryny i nie działa w przeglądarce IE6. Ale to jest przydatne, aby uzyskać skalowane tło dla wizjer lub kontenera.

Adam Luter
źródło
3
Jeśli chcesz przeskalować obrazy w DÓŁ do kontenera z zachowanym współczynnikiem proporcji, wydaje się, że jest to maksymalna wysokość i maksymalna szerokość zamiast min-wysokość / min-szerokość, które wydają się skalować mniejsze obrazy w górę.
Karsten
Podoba mi się ta odpowiedź, a @Karsten ma pojęcie o maksymalnej wysokości i maksymalnej szerokości.
Ramsharan
2

Cóż, przychodzi mi na myśl hack CSS, który rozwiąże ten problem.

Możesz dodać następujący wiersz w swoim pliku CSS:

* html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; }

Powyższy kod będzie widoczny tylko dla IE6. Współczynnik proporcji nie będzie idealny, ale możesz sprawić, że będzie wyglądał nieco normalnie. Jeśli naprawdę chcesz, aby był idealny, musiałbyś napisać skrypt javascript, który odczytywałby oryginalną szerokość obrazu i odpowiednio ustawić współczynnik, aby określić wysokość.

jgallant
źródło
2

Jedynym sposobem wykonania jawnego skalowania w CSS jest użycie sztuczek, takich jak tutaj .

Tylko IE6, możesz także użyć filtrów (sprawdź PNGFix ). Ale zastosowanie ich automatycznie do strony będzie wymagało javascript, chociaż ten javascript może być osadzony w pliku CSS.

Jeśli będziesz potrzebować javascript, możesz po prostu wypełnić javascript brakującą wartością wysokości, sprawdzając obraz po załadowaniu treści. (Przepraszam, nie mam odniesienia do tej techniki).

Na koniec, wybacz mi tę mydelniczkę, możesz zrezygnować z obsługi IE6 w tej sprawie. Możesz dodać _width: autopo swojej width: 75pxregule, aby IE6 przynajmniej renderowało obraz rozsądnie, nawet jeśli ma niewłaściwy rozmiar.

Polecam to ostatnie rozwiązanie po prostu dlatego, że IE6 odchodzi: 20% i spada prawie o jeden procent miesięcznie . Pragnę również zauważyć, że Twoja witryna ma charakter rekreacyjny i znajduje się w Wielkiej Brytanii. Oba te czynniki pomagają demograficznym odchudzeniom odejść od IE6: użycie IE6 spada o prawie 40% w weekendy (bez cytatów, przepraszam), a Wielka Brytania ma znacznie niższą demografię IE6 (znowu bez cytatów, przepraszam).

Powodzenia!

Adam Luter
źródło