CSS: 100% ширина або висота, зберігаючи співвідношення сторін?

Наразі за допомогою STYLE я можу використовуватись width: 100%і autoпо висоті (або навпаки), але все ще не можу обмежувати зображення у певному положенні, будь то занадто широке або занадто високе відповідно.

Будь-які ідеї?

Якщо ви визначите лише один вимір на зображенні, співвідношення сторін зображення завжди буде збережене.

Чи питання в тому, що зображення більше / вище, ніж вам подобається?

Ви можете помістити його всередині DIV, встановленого на максимальну висоту / ширину, яку ви хочете для зображення, а потім встановити переповнення: приховано. Це може обрізати все, що ви хочете.

Якщо зображення на 100% шириною та висотою: автоматично, і ви вважаєте, що воно занадто високе, це пов'язано саме з тим, що співвідношення сторін збережене. Вам потрібно буде обрізати або змінити співвідношення сторін.

Будь ласка, надайте додаткову інформацію про те, що ви конкретно намагаєтеся зробити, і я спробую допомогти більше!

--- РЕДАКЦІЯ НА ОСНОВІ ЗВЕРНЕННЯ ---

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

Через кілька років, шукаючи ту саму вимогу, я знайшов варіант CSS, використовуючи розмір фону.

Він повинен працювати в сучасних браузерах (IE9 +).

<div id="container" style="background-image:url(myimage.png)">
</div>

І стиль:

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Довідка: http://www.w3schools.com/cssref/css3_pr_background-size.asp

І демонстрація: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

Встановивши max-widthвластивість CSS на 100%, зображення заповнить ширину батьківського елемента, але не зробить більшим за його фактичний розмір, зберігаючи роздільну здатність.

Встановлення heightвластивості autoпідтримувати співвідношення сторін зображення, використовуючи цю техніку, дозволяє перекрити статичну висоту і дозволяє зображенню пропорційно згинатися у всіх напрямках.

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

Просте елегантне робоче рішення:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Мав те саме питання. Проблема для мене полягала в тому, що властивість висоти також вже була визначена в іншому місці, виправляючи її так:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

Просте рішення:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

До речі, якщо ви хочете централізувати його в батьківському контейнері div, ви можете додати ці властивості css:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Це дійсно має працювати так, як очікувалося :)

Одна з відповідей включає фоновий розмір: містять css-операцію, який мені дуже подобається, тому що це просто виклад того, що ви хочете зробити, і браузер просто це робить.

На жаль, рано чи пізно вам потрібно буде застосувати тінь, яка, на жаль, не буде добре грати з рішеннями фонового зображення.

Тож скажімо, що у вас є контейнер, який чуйний, але він має чітко визначені межі для мінімальної та максимальної ширини та висоти.

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

І контейнер має імг, який повинен знати про пікселі висоти контейнера, щоб уникнути отримання дуже високого зображення, яке переповнюється або обрізається.

У img слід також визначати максимальну ширину 100%, щоб по-перше дозволяти виводити менші ширини, а по-друге, на основі відсотків, що робить його параметричним.

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

Зауважте, що він має приємну тінь;)

Насолоджуйтесь живим прикладом у цій скрипці: http://jsfiddle.net/pligor/gx8qthqL/2/

Я використовую це для прямокутного контейнера з фіксованою висотою та шириною, але із зображеннями різних розмірів.

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

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

width: 100%;
height: auto;

Це дуже просте рішення, яке я придумав після переходу посилання на conca та перегляду розміру фону. Він підірває зображення вгору, а потім вписує його по центру у зовнішній контейнер без його масштабування.

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

Не заскочити в старе питання, але ...

#container img {
      max-width:100%;
      height:auto !important;
}

Незважаючи на те, що це неправильно, оскільки ви використовуєте важливе переосмислення по висоті, якщо ви використовуєте CMS на зразок WordPress, який встановлює для вас висоту та ширину, це добре працює.

В даний час можна використовувати vwі vhблоки, які представляють собою 1% проти iewport - х ш IDþ і ч вісім відповідно.

https://css-tricks.com/fun-viewport-units/

Так, наприклад:

img {
  max-width: 100vw;
  max-height: 100vh;
}

... зробить зображення максимально високим, підтримуючи співвідношення сторін, але не ширше або вище 100% вікна перегляду.

Використовуйте JQuery чи інше, оскільки CSS - це загальне неправильне уявлення (про це свідчать незліченні питання та дискусії щодо простих цілей дизайну).

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

Я думаю, що це те, що ти шукав, я шукав його сам, але потім я згадав це знову, поки я знайшов код.

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

Цифрова еволюція на шляху.