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

Question

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

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

затем

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

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

Answer 1

Да, вам нужен инкапсулирующий 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; }

Answer 2

Загрузить изображение в качестве фона для 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.

Answer 3

2017 ответ

Подгонка объекта CSS работает во всех текущих браузерах. Это позволяет элементу img быть больше, не растягивая изображение.

Вы можете добавить object-fit: cover; к вашему CSS.

Answer 4

Подгонка объекта CSS3

Не уверен, насколько далеко он был реализован с помощью webkit, IE и firefox. Но Опера работает как магия

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/

Answer 5

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

Answer 6

Сделай 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;
}

Надеюсь, что поможет

Answer 7

Должен ли я добавить инкапсулирующий

или ?

Я думаю, что вы делаете. Единственное, что приходит на ум, - это отступы, но для этого вам придется заранее знать размеры изображения.

Answer 8

Вы можете использовать, как показано ниже:

.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" />

Answer 9

Если использование 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%;
    }
}

Answer 10

Все, что я сделал, это изменил таблицу стилей тега img. Но в моем случае я знал контейнер с div и высоту. Кроме того, контейнер div с, высота была больше, чем фактический размер изображения. Надеюсь, это поможет.

работал для меня.

http://guntucomputerhacks.blogspot.com.au/2014/08/force-image-width-and-height-without.html