Як встановити ширину та висоту зображення, не розтягуючи його?

Якщо я маю:

#logo {
    width: 400px;
    height: 200px;
}

тоді

<img id="logo" src="logo.jpg"/>

розтягнеться, щоб заповнити цей простір. Я хочу, щоб зображення залишалося однакового розміру, але щоб воно займало стільки місця в DOM. Чи потрібно додавати інкапсулюючу <div>чи <span>? Я ненавиджу додавати розмітку для стилю.

Так, вам потрібен інкапсулюючий div:

<div id="logo"><img src="logo.jpg"></div>

з чимось на зразок:

#logo { height: 100px; width: 200px; overflow: hidden; }

Інші рішення (відступи, поля) є більш нудними (оскільки потрібно розрахувати правильне значення, виходячи з розмірів зображення), але також ефективно не дозволяють контейнеру бути меншим за зображення.

Крім того, вищезазначене можна набагато легше адаптувати для різних макетів. Наприклад, якщо потрібно зображення внизу праворуч:

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }

Відповідь 2017 року

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

Ви можете додати object-fit: cover;до свого CSS.

Завантажте зображення як фон для div.

Замість:

<img id='logo' src='picture.jpg'>

робити

<div id='logo' style='background:url(picture.jpg)'></div>

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

1. Без зайвої розмітки. Div просто замінює img.
2. Легко центруйте або встановлюйте зображення на інший зсув. напр.url(pic) center top;
3. Повторіть зображення, коли достатньо мало. (Добре, не знаю, чому ти цього хочеш)
4. Встановіть колір bg в одному і тому ж висловлюванні, легко застосуйте одне і те ж зображення до кількох елементів і всього, що стосується зображень bg.

Оновлення: Ця відповідь наведена раніше, ніж об'єкт впису; тепер ви, мабуть, повинні використовувати object-fit / object-position.

Це все ще корисно для старих браузерів, для додаткових властивостей (таких як фонове повторення) та для крайніх випадків (Наприклад, обхідні помилки Chrome з flexbox та позицією об'єкта та проблеми FF (колишні?) З grid + autoheight + object- обгорткові divs у grid / flexbox часто дають ... неінтуїтивні результати.)

Об'єкт CSS3

Не впевнений, наскільки це було реалізовано webkit, IE та firefox. Але Opera працює як магія

object-fitпрацює зі вмістом SVG, але того ж ефекту можна також досягти, встановивши preserveAspectRatio=""атрибут у самому SVG.

img {
  height: 100px;
  width: 100px;
  -o-object-fit: contain;
}

Демо-версія Chris Mills тут http://dev.opera.com/articles/view/css3-object-fit-object-position/

#logo {
    width: 400px;
    height: 200px;

    /*Scale down will take the necessary specified space that is 400px x 200px without stretching the image*/
    object-fit:scale-down;
}

Зробіть div і дайте йому клас. Потім вставте в нього img.

<div class="mydiv">

<img src="location/of/your/image" ></img>

</div>

Встановіть розмір вашого div і зробіть його відносним.

    .mydiv {
        position: relative;
        height:300px;
        width: 100%;
        overflow: hidden;
    }

потім стилізуйте свій образ

img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

Сподіваюся, що це допомагає

Ви можете використовувати, як показано нижче:

.width100 {
  max-width: 100px;
  height: 100px;
  width: auto;
  border: solid red;
}

<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />

Чи потрібно додавати інкапсулюючий <div> або <span>?

Я думаю, що ти хочеш. Єдине, що спадає на думку, - це заповнення, але для цього вам слід знати розміри зображення заздалегідь.

Ви можете спробувати встановити відступ замість висоти / ширини.

Я можу придумати, щоб розтягнути або ширину, або висоту і дозволити їй змінювати розмір у співвідношенні-аспекті. З боків буде трохи пробілу. Щось на зразок того, як широкий екран відображає роздільну здатність 1024x768.

При використанні Flexbox є правильним вибором для вас (не потрібно SUPORT старих браузерів), перевірте мій інший відповідь тут (який, можливо , є дублікат цього):

В основному вам потрібно буде обернути свій тег img у div, і ваш css виглядатиме так:

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 400px; height: 200px;

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

Це досить давнє запитання, але у мене була точно така ж надокучлива проблема, коли все працювало нормально для Chrome / Edge (із властивістю об'єкта-об'єкта), але те саме властивість css не працювало в IE11 (оскільки не підтримується в IE11), я опинився за допомогою елемента HTML5 "фігура", який вирішив усі мої проблеми.

Я особисто не використовував зовнішній тег DIV, оскільки в моєму випадку це зовсім не допомагало, тому я уникав зовнішнього DIV і просто замінив його елементом "figure".

Наведений нижче код змушує зображення добре зменшувати / зменшувати (без зміни вихідного співвідношення сторін).

<figure class="figure-class">
  <img class="image-class" src="{{photoURL}}" />
</figure>

та css-класи:

.image-class {
    border: 6px solid #E8E8E8;
    max-width: 189px;
    max-height: 189px;
}

.figure-class {
    width: 189px;
    height: 189px;
}