Utwórz obraz o szerokości równej 100% nadrzędnego elementu div, ale nie większej niż jego szerokość


125

Próbuję uzyskać obraz (umieszczony dynamicznie, bez ograniczeń co do wymiarów) tak szeroki, jak jego nadrzędny element div, ale tylko wtedy, gdy ta szerokość nie jest szersza niż jego własna szerokość w 100%. Próbowałem tego bezskutecznie:

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

Wiele z tych obrazów jest znacznie szerszych niż ich nadrzędny element div, dlatego chciałbym, aby odpowiednio zmieniły rozmiar, ale kiedy pojawia się tam mały obraz i zostaje przeskalowany poza normalne wymiary, wygląda to naprawdę okropnie. Czy jest na to sposób?


5
Co się stanie, jeśli tylko określisz max-width: 100%?
Fyodor Soikin,

@Fyodor Soikin - Podaj to jako odpowiedź, a zagłosuję na Ciebie.
Gert Grenander

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

kbrimington wnosi dobry punkt do stołu. Według reference.sitepoint.com/css/max-width#compatibilitysection , implementacja IE8 jest błędna.
Alfonso,

Odpowiedzi:


221

Po prostu określ max-width: 100%sam, to powinno wystarczyć.


1
Wydaje się, że Chrom po prostu pozostawia go na 100%, niezależnie od kontekstu. Być może powinienem przestać ciągle przyglądać się mojej pracy nad oprogramowaniem w wersji beta. Dziękuję Ci!
Alfonso,

Jak to zrobić bez używania max-width: 100%. W React-Native nie można używać procentów.
Croolsby,

@Croolsby możesz użyć wartości procentowej w natywnej reakcji, ale z wartością ciągu, taką jak `` 100% ''
Rafael Hovsepyan

9

Znalazłem ten post w wyszukiwarce Google i rozwiązałem 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;
}

W związku z powyższym zmieniłem max-width na wymiary kontenera treści, w którym znajduje się mój obraz. W tym przypadku jest to: szerokość kontenera - dopełnienie - obrzeże = max szerokość

W ten sposób mój obraz nie wyrwie się z zawierającego div, a nadal mogę umieścić obraz wewnątrz elementu div zawartości.

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

Dodatkowe: przetestowałem to na obrazie o szerokości 1024 pikseli wyświetlanym przy 678px (maksymalna szerokość) i obrazie o szerokości 500px wyświetlanym przy 500px (szerokość obrazu).


1
Użycie width:auto !important;rozwiązało problem w IE11, gdzie obraz byłby większy niż jego kontener, a IE11 nie zmniejszał obrazu. Ustawienie tego w imgselektorze posortowało problem w IE11. Jednak ustawienie width:100%;bez drugiej reguły nic nie dało w IE11. Zatem „przesłonięcie” musi zostać uwzględnione, aby obraz został przeskalowany do rozmiaru jego kontenera.
lowtechsun

3

Ustawienie szerokości 100% to pełna szerokość elementu div, w którym się on znajduje, a nie oryginalny pełnowymiarowy obraz. Nie da się tego zrobić bez JavaScript lub innego języka skryptowego, który może zmierzyć obraz. Jeśli możesz mieć stałą szerokość lub stałą wysokość elementu div (np. Szerokość 200 pikseli), nie powinno być zbyt trudno nadać obrazowi zakres do wypełnienia. Ale jeśli umieścisz obraz 20x20 pikseli w polu 200x300 pikseli, nadal będzie on zniekształcony.


1
proszę podać działający przykład, jeśli to możliwe. Jest to zalecane. :)
bhb

1

W stylu liniowym - to działa dla mnie za każdym razem

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>

0

Powinieneś ustawić maksymalną szerokość, a jeśli chcesz, możesz również ustawić wyściółkę na jednej ze stron. W moim przypadku max-width: 100% była dobra, ale obraz znajdował się tuż obok końca ekranu.

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/

0

Miałem również ten sam problem, ale ustawiłem wartość wysokości w moim CSS na auto i to rozwiązało mój problem. Nie zapomnij też zrobić właściwości display.

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }  

tylko fyi ... możesz usunąć wysokość: auto i szerokość: auto. max-height i max-width to to samo.
Debbie Kurth



Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.