Зробіть ширину зображення на 100% від батьківського поділу, але не більше його власної ширини

Я намагаюся отримати зображення (динамічно розміщене, без обмежень щодо розмірів), щоб воно було таким же широким, як і його батьківський поділ, але лише до тих пір, поки ця ширина не буде ширшою від власної ширини на 100%. Я спробував це, безрезультатно:

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

Багато з цих зображень набагато ширші, ніж їх батьківський поділ, тому я хотів би, щоб вони відповідно змінили розмір, але коли невелике зображення з'являється там і стає масштабним за його нормальні розміри, воно справді виглядає жахливо. Чи є спосіб це зробити?

Просто вкажіть max-width: 100%поодинці, що це має зробити.

Знайшов цю публікацію в пошуку Google, і це вирішило мою проблему завдяки відповіді @jwal, але я внесла одне доповнення до його рішення.

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

З вищезазначеним я змінив максимальну ширину на розміри контейнера вмісту, в якому знаходиться моє зображення. У цьому випадку це: ширина контейнера - набивання - бордер = максимальна ширина

Таким чином, моє зображення не вирветься із вмістуючого div, і я все ще можу плавати в межах вмісту div.

Я протестував в IE 9, FireFox 18.0.2 і Chrome 25.0.1364.97, Safari iOS і, здається, працює.

Додатково: Я протестував це на зображенні, яке шириною 1024 пікселів, що відображається на рівні 678 пікселів (максимальна ширина), і зображення в ширині 500 пікселів, що відображається в 500 пікселів (ширина зображення).

Встановлення ширини 100% - це повна ширина даного тексту, а не оригінальне повнорозмірне зображення. Неможливо зробити це без JavaScript або іншої мови сценаріїв, яка може виміряти зображення. Якщо ви можете мати фіксовану ширину або фіксовану висоту ключа (наприклад, 200 пікселів в ширину), тоді не повинно бути занадто важким, щоб дати зображенню заповнити діапазон. Але якщо ви помістите зображення 20х20 пікселів у вікно розміром 200х300 пікселів, воно все одно буде спотворене.

У стилі лінії - це працює для мене кожен раз

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

Ви повинні встановити максимальну ширину, і якщо хочете, ви також можете встановити накладки на одній із сторін. У моєму випадку максимальна ширина: 100% було добре, але зображення було прямо в кінці екрана.

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

У мене також була така ж проблема, але я встановив значення висоти в своєму CSS для автоматичного, і це вирішило мою проблему. Крім того, не забудьте зробити властивість відображення.

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

Я знайшов відповідь, яка працювала на мене, і її можна знайти за наступним посиланням:

Контейнери з повною шириною в батьків з обмеженою шириною

Якщо зображення менше батьківського ...

.img_100 {
  width: 100%;
}

Я б користувався майном display: table-cell

Ось посилання