Skalowanie (ale nie podniesienie) obrazów przy użyciu CSS w celu dopasowania elementu div w IE9 (max-width: 100% fix)

Nie mogę używać JS, powinno to być archiwizowane tylko przez CSS. Kontener (DIV) to element "tabela-komórka" o szerokości automatycznej (elastycznej).Skalowanie (ale nie podniesienie) obrazów przy użyciu CSS w celu dopasowania elementu div w IE9 (max-width: 100% fix)

Chciałbym przeskalować obraz tylko wtedy, gdy jego szerokość jest większa niż kontener (użytkownik może zmienić rozmiar okna - to jest powód).

Użyłem kodu pokazanego poniżej, ale działa tylko na IE7.

max-width: 100%; 
height: auto; 
width: auto\9;

Próbowałem znaleźć poprawkę roboczą dla IE9, ale bez powodzenia.

Źródło

2011-11-08 Simek

dodanie tylko 'max-width: 100%;' do tagu img nie działa? przetestuj go [tutaj] (http://jsfiddle.net/SAada/) zmieniając rozmiar okna. Działa na IE7, IE8, Chrome i Firefox, ale mogę go teraz przetestować w IE9. W każdym razie, jak zachowuje się IE9? – scumah

To jest dokładna sytuacja i problem, który musiałem rozwiązać: http://jsfiddle.net/SAada/2/ – Simek

Ustawienia stylu, z których korzystasz od obrazu, są w porządku. Sprawdź tę próbkę, która działa dla popularnych przeglądarek, w tym IE9 - http://jsfiddle.net/cTxYc/ Ustawienia, które określiłeś dla div, mieszają się z ustawieniami dla obrazu – mvark

Twoje max-width należy ustawić rozmiar obrazu, a następnie width do 100% tak:

img { 
    width: 100%; 
    max-width: 500px; 
    height: auto; 
}

Oczywiście, oznacza to, że max-width musi być dynamicznie ustalane na podstawie off obraz jest załadowany, które może nie być praktyczne.

Źródło

2011-11-08 13:53:03 ScottS

Co zrobić, jeśli nie znam rozmiaru obrazu? Użytkownik może opublikować go bez żadnych ograniczeń i powinien skalować się w sposób elastyczny. – Simek

Następnie nie można ograniczyć go do 'max-width', ponieważ nie poznasz 'maksymalnej szerokości', na którą pozwolisz (chyba że masz zamiar po prostu zezwolić na maksimum dla wszystkich obrazów, niezależnie od tego, – ScottS

Więc jak wymienione w oryginalnym kodzie pytającym działa dla IE7? – Simek

Natknąłem się na to stare pytanie, próbując zrobić dokładnie to samo, co OP próbował. Odpowiadam na każdego, kto może tu wylądować. Po zbadaniu http://jsfiddle.net/SAada/2/ wymienionego przez OP, znalazłem ciekawe rozwiązanie:

ustawienia

height: auto;

zapewni, że obraz nie będzie rozciągnięty/skalowane w górę. W tym samym czasie ustawienie obrazu zostanie zmniejszone, jeśli ustawienie szerokości elementu nadrzędnego jest mniejsze niż szerokość obrazu, spowoduje ustawienie wartości

Zatem kombinacja, która pracuje dla mnie jest:

img { 
    max-width: 100%; 
    height: auto; 
}

Aha, i po pewnym więcej poszukiwań, odkryłem, że technika ta jest również stosowana przez Bootstrap dla reagujących zdjęć!

Źródło

2017-12-28 12:02:56

Skalowanie (ale nie podniesienie) obrazów przy użyciu CSS w celu dopasowania elementu div w IE9 (max-width: 100% fix)

Odpowiedz

Powiązane problemy