Utwórz szerokość obrazu w 100% div elementu nadrzędnego, ale nie większą niż jego własna szerokość.

Próbuję uzyskać obraz (umieszczony dynamicznie, bez żadnych ograniczeń wymiarów), który będzie tak szeroki, jak jego element div, ale tylko jako o ile ta szerokość nie jest szersza niż jego własna szerokość o 100%. Próbowałem to bezskutecznie:Utwórz szerokość obrazu w 100% div elementu nadrzędnego, ale nie większą niż jego własna szerokość.

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

Wiele z tych obrazów to sposób szerszy niż ich div nadrzędnej, dlatego chciałbym je odpowiednio do rozmiaru, ale gdy mały obraz pojawia się tam i zostaje wyskalowany poza jego normalne wymiary, naprawdę wygląda okropnie. Czy jest jakiś sposób na zrobienie tego?

Źródło

2010-08-11 Alfonso

Co się dzieje, jeśli tylko określić 'max-width: 100 % "? –

@Fyodor Soikin - Daj to jako odpowiedź, a ja zagłosuję za tobą. –

Dobrze byłoby jednak rozważyć, które przeglądarki obsługują maksymalną szerokość. – kbrimington

146

Wystarczy podać tylko numer max-width: 100%, który powinien to zrobić.

Źródło

2010-08-11 23:47:43

Chromium wydaje się po prostu pozostawić go w 100% niezależnie od kontekstu. Być może powinienem przestać ciągle przyglądać się mojej pracy nad oprogramowaniem beta. Dziękuję Ci! – Alfonso

Wygląda na to, że nie działa w Firefoksie. –

Ustawienie szerokości 100% to pełna szerokość elementu div, a nie oryginalny obraz w pełnym rozmiarze. Nie da się tego zrobić bez JavaScriptu lub innego języka skryptowego, który może zmierzyć obraz. Jeśli możesz mieć stałą szerokość lub stałą wysokość elementu div (np. 200px szerokości), to nie powinno być zbyt trudne dać obrazowi zakres do wypełnienia. Ale jeśli umieścisz obraz o wymiarach 20 x 20 pikseli w pudełku o wymiarach 200x300 pikseli, nadal będzie on zniekształcony.

Źródło

2012-07-17 16:46:41 Amanda

proszę podać przykład pracy, gdy tylko jest to możliwe. [To] (http://jsfiddle.net/) jest zalecane. :) – bhb

^oh the ironony =] – ahnbizcad

Znaleziono ten wpis w wyszukiwarce Google i rozwiązał on mój problem dzięki odpowiedzi @jwal, ale dodałem jeden dodatek do jego rozwiązania.

img.content.x700 { 
    width: auto !important; /*override the width below*/ 
    width: 100%; 
    max-width: 678px; 
    float: left; 
    clear: both; 
}

Z powyższego Zmieniłem max-width do wymiarów pojemnika zawartości że mój obraz jest w tym przypadku jest to: szerokość kontenera - wyściółka - pensjonariusz = max szerokość

ten sposób. mój obraz nie wyrwie się z zawierającego go elementu div i nadal mogę wyświetlać obraz wewnątrz elementu div treści.

Testowałem w IE 9, FireFox 18.0.2 i Chrome 25.0.1364.97, Safari iOS i wydaje się działać.

Dodatkowo: Przetestowałem to na obrazie o szerokości 1024 pikseli, wyświetlanym przy 678 pikselach (maksymalna szerokość) i obrazie o szerokości 500 pikseli wyświetlanym przy 500 pikseli (szerokość obrazu).

Źródło

2013-03-06 14:03:17 mattauckland

Użycie 'width: auto! Important;' naprawiło problem w IE11 dla mnie, gdzie obraz byłby większy niż jego kontener, a IE11 nie skalowałby obrazu. Ustawienie tego w selektorze 'img' posortowało problem w IE11. Jednak ustawienie "width: 100%;" bez drugiej reguły nic nie zrobiło w IE11.Aby obraz mógł być skalowany do rozmiaru kontenera, należy uwzględnić "przesłonięcie". – lowtechsun

Jeśli obraz jest mniejszy niż rodzic ...