Как установить ширину и высоту изображения, не растягивая его?

Если у меня есть:

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

Обновление: это ответ до объектной подгонки; теперь вам, вероятно, следует использовать объект-соответствие / положение-объекта.

Он по-прежнему полезен для старых браузеров, для дополнительных свойств (например, background-repeat) и для крайних случаев (например, обходные ошибки Chrome с flexbox и object-position и проблемы FF (бывшие?) С grid + autoheight + object- подходят. Обертки div в grid / flexbox часто дают ... неинтуитивные результаты.)

Соответствие объекта CSS3

Не уверен, насколько это реализовано в webkit, IE и firefox. Но Opera работает как по волшебству

object-fitработает с содержимым SVG, но того же эффекта можно добиться, установив preserveAspectRatio=""атрибут в самом SVG.

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

Демо Криса Миллса здесь 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 является для вас допустимым вариантом (не нужно поддерживать старые браузеры), проверьте мой другой ответ здесь (который, возможно, является дубликатом этого):

В основном вам нужно обернуть свой тег 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 "figure", который решил все мои проблемы.

Я лично не использовал внешний тег 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;
}