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

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?

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

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).

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.

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

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

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*/

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;
 }  

Znalazłem odpowiedź, która zadziałała dla mnie i można ją znaleźć pod następującym linkiem:

Kontenery o pełnej szerokości u rodziców o ograniczonej szerokości

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

.img_100 {
  width: 100%;
}

Korzystałbym z nieruchomości display: table-cell

Oto link