Если у меня есть:
#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>
Все браузеры будут обрезать часть изображения, которая не подходит.
Это имеет несколько преимуществ по сравнению с оберткой элемента, переполнение которого скрыто:
url(pic) center top;
Обновление: это ответ до объектной подгонки; теперь вам, вероятно, следует использовать объект-соответствие / положение-объекта.
Он по-прежнему полезен для старых браузеров, для дополнительных свойств (например, background-repeat) и для крайних случаев (например, обходные ошибки Chrome с flexbox и object-position и проблемы FF (бывшие?) С grid + autoheight + object- подходят. Обертки div в grid / flexbox часто дают ... неинтуитивные результаты.)
источник
background-repeat:no-repeat !important; float:left; width:100px; height:100px;
Соответствие объекта CSS3
Не уверен, насколько это реализовано в webkit, IE и firefox. Но Opera работает как по волшебству
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" />
источник
Я думаю, что да. Единственное, что приходит на ум, это отступы, но для этого вам нужно заранее знать размеры изображения.
источник
вы можете попробовать установить отступ вместо высоты / ширины.
источник
Что я могу придумать, так это растянуть ширину или высоту и позволить ему изменять размер в соотношении сторон. По бокам будет немного белого пространства. Примерно так, как на Широком экране отображается разрешение 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; }
источник