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

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:

• Lista, która powinna zawierać miniatury
• Pojedynczy post na blogu, który przedstawia obraz w pełnym rozmiarze.

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.

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!

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.

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

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!