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

Ответ 1

Да вам нужен инкапсулирующий div:

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

с чем-то вроде:

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

Другие решения (padding, margin) более утомительны (в том, что вам нужно вычислить правильное значение на основе размеров изображения), но также не позволяют эффективно уменьшить размер контейнера по сравнению с изображением.

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

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

Ответ 2

Загрузите изображение в качестве фона для div.

Вместо:

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

делать

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

Все браузеры обрезают часть изображения, которое не подходит.
Это имеет несколько преимуществ overr, обертывающих его элементом, переполнение которого скрыто:

• Никакой дополнительной разметки. Div просто заменяет img.
• Легко центрируйте или установите изображение на другое смещение. например. url(pic) center top;
• Повторите изображение, если оно достаточно мало. (ОК, не знаю почему вы хотели бы этого)
• Установите цвет bg в том же самом операторе, легко примените одно и то же изображение к нескольким элементам и все, что относится к изображениям bg.

Ответ 3

Ответ 2017

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

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

Ответ 4

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/

Ответ 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;
}

Ответ 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;
}

надеюсь, это поможет

Ответ 7

Нужно ли добавлять инкапсулирующий <div> или <span> ?

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

Ответ 8

вы можете попробовать установить дополнение вместо высоты/ширины.

Ответ 9

Я могу думать о том, чтобы растянуть либо ширину, либо высоту, и позволить ей изменять размер в аспекте соотношения. По бокам будет пустое пространство. Что-то вроде того, как широкоэкранный дисплей отображает разрешение 1024x768.

Ответ 10

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

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

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

Ответ 11

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

Ответ 12

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

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