Как автоматически изменить размер большого изображения, чтобы оно помещалось в контейнер div меньшей ширины при сохранении соотношения ширины и высоты?
Пример: stackoverflow.com - когда изображение вставляется в панель редактора, а изображение слишком велико для размещения на странице, размер изображения автоматически изменяется.
html
css
image
autoresize
001
источник
источник
Ответы:
Не применяйте явную ширину или высоту к тегу изображения. Вместо этого дайте это:
Также,
height: auto;
если вы хотите указать только ширину.Пример: http://jsfiddle.net/xwrvxser/1/
источник
<a>
тегом изображение не изменилось. Применение правил к A-тегу решило эту проблему.Объект посадки
Оказывается, есть еще один способ сделать это.
сделаю работу. Это CSS 3 вещи.
Скрипка: http://jsfiddle.net/mbHB4/7364/
источник
object-fit: cover
В настоящее время нет способа сделать это правильно детерминированным способом с помощью изображений фиксированного размера, таких как файлы JPEG или PNG.
Чтобы изменить размер изображения пропорционально, вы должны установить либо высоту или ширину до «100%», но не оба.Если вы установите оба значения на «100%», ваше изображение будет растянуто.
Выбор высоты или ширины зависит от вашего изображения и размеров контейнера:
height="100%"
на него изображение.width="100%"
на изображение.Если ваше изображение представляет собой SVG, который представляет собой векторный формат изображения переменного размера, у вас может быть расширение, чтобы оно подходило для контейнера автоматически.
Вам просто нужно убедиться, что SVG-файл не имеет ни одного из этих свойств, установленных в
<svg>
теге:Большинство программ векторного рисования устанавливают эти свойства при экспорте файла SVG, поэтому вам придется вручную редактировать файл каждый раз при экспорте или писать скрипт для этого.
источник
background-size: contain
.Вот решение, которое выровняет ваш img по вертикали и горизонтали в пределах div без растягивания, даже если предоставленное изображение слишком маленькое или слишком большое, чтобы поместиться в div.
Содержание HTML:
Содержание CSS:
Часть JQuery:
источник
Сделай это проще!
Дайте контейнеру фиксированный,
height
а затем дляimg
тега внутри него установитеwidth
иmax-height
.Разница в том, что вы установили
width
100%, а неmax-width
.источник
Прекрасный хак.
У вас есть два способа сделать изображение отзывчивым.
Запустите это здесь
Но нужно использовать
img
тег , чтобы поместить изображения , как это лучше , чемbackground-image
с точки зрения SEO , как вы можете написать ключевое слово вalt
вimg
теге. Так что вот вы можете сделать изображение отзывчивым.Запустите это здесь
источник
Вы можете установить изображение в качестве фона для div, а затем использовать свойство background-size CSS :
Он «масштабирует фоновое изображение до максимально возможного размера, чтобы фоновая область была полностью покрыта фоновым изображением. Некоторые части фонового изображения могут не отображаться в пределах области позиционирования фона» - W3Schools
источник
alt
значения и такие вещи (хотя вы также можете добавить фиктивное изображение, которое будет невидимым для технологий, не являющихся помощниками), или вам может потребоваться сделать его кликабельным.background-size: contain
и я думаю, что лично я пойду по пути фиктивного изображения только потому, что нет действительно простого способа сделать то, что описано здесь без JavaScriptПроверьте мое решение: http://codepen.io/petethepig/pen/dvFsA
Он написан на чистом CSS, без какого-либо кода JavaScript. Он может обрабатывать изображения любого размера и любой ориентации.
Учитывая такой HTML:
код CSS будет:
источник
Я только что опубликовал плагин jQuery, который делает именно то, что вам нужно, с большим количеством опций:
https://github.com/GestiXi/image-scale
Применение:
HTML
JavaScript
источник
Это решение не растягивает изображение и заполняет весь контейнер, но оно обрезает часть изображения.
HTML:
CSS:
источник
Я вижу, что многие люди предложили подгонку объекта, что является хорошим вариантом. Но если вы хотите, чтобы он работал и в старых браузерах , есть другой способ сделать это легко.
Это довольно просто. Подход, который я выбрал, состоял в том, чтобы расположить изображение внутри контейнера с абсолютным, а затем поместить его прямо в центр, используя комбинацию:
Как только это в центре, я даю изображение,
Это заставляет изображение получить эффект Object-fit: cover.
Вот демонстрация вышеуказанной логики.
https://jsfiddle.net/furqan_694/s3xLe1gp/
Эта логика работает во всех браузерах.
источник
Следующее работает отлично для меня:
источник
У меня есть гораздо лучшее решение без необходимости JavaScript. Это полностью отзывчиво, и я использую это много. Вам часто нужно подогнать изображение с любым соотношением сторон к элементу контейнера с указанным соотношением сторон. И иметь всю эту вещь полностью отзывчивым является обязательным.
Вы можете установить максимальную ширину и максимальную высоту независимо; изображение будет соответствовать наименьшему (в зависимости от значений и соотношения сторон изображения). Вы также можете настроить изображение так, чтобы оно было выровнено, как вы хотите (например, для изображения товара на бесконечном белом фоне вы можете легко расположить его по центру).
источник
Укажите высоту и ширину, необходимую для вашего изображения, div, который содержит тег <img>. Не забудьте указать высоту / ширину в правильном теге стиля.
В теге <img> укажите "
max-height
и"max-width
как 100%.Вы можете добавить детали в соответствующие классы после того, как вы правильно поняли.
источник
Код ниже адаптирован из предыдущих ответов и протестирован мной с использованием изображения под названием
storm.jpg
.Это полный код HTML для простой страницы, которая отображает изображение. Это прекрасно работает и был проверен мной с www.resizemybrowser.com. Поместите код CSS вверху вашего HTML-кода, под разделом заголовка. Поместите код с изображением туда, куда вы хотите.
источник
источник
Вы должны сообщить браузеру высоту, где вы размещаете его:
источник
Изменить: Предыдущее позиционирование изображения на основе таблицы имели проблемы в Internet Explorer 11 (
max-height
не работает вdisplay:table
элементах). Я заменил его на встроенное позиционирование, которое не только прекрасно работает как в Internet Explorer 7, так и в Internet Explorer 11, но также требует меньше кода.Вот мой взгляд на эту тему. Это будет работать только в том случае, если контейнер имеет заданный размер (
max-width
иmax-height
, похоже, он не ладит с контейнерами, которые не имеют конкретного размера), но я написал CSS-содержимое таким образом, чтобы его можно было использовать повторно (добавитьpicture-frame
класс а такжеpx125
размер класса для вашего существующего контейнера).В CSS:
И в HTML:
DEMO
Показать фрагмент кода
Изменить: Возможное дальнейшее улучшение с помощью JavaScript (масштабирование изображений):
источник
line-height
. Если альтернативный текст содержит более одной строки, он начнет выглядеть очень плохо ...Я исправил эту проблему, используя следующий код:
источник
Как здесь ответили , вы также можете использовать
vh
юниты,max-height: 100%
если они не работают в вашем браузере (например, Chrome):источник
vh
? а что не работает в Chrome?max-height: xx%
(процентная единица) не работает в Chrome с некоторыми элементами, какimg
, ноvh
единица работает. Однако проценты работать сheight
,width
,max-width
и т.д.Я центрировал и масштабировал пропорционально изображение внутри гиперссылки как по горизонтали, так и по вертикали следующим образом:
Он был протестирован в Internet Explorer, Firefox и Safari.
Больше информации о центрировании здесь .
источник
Принятый ответ от Thorn007 не работает, когда изображение слишком маленькое .
Чтобы решить эту проблему, я добавил коэффициент масштабирования . Таким образом, изображение увеличивается и заполняет контейнер div.
Пример:
Ноты:
-webkit-transform:scale(4); -webkit-transform-origin:left top;
в стиле.источник
Если вы используете Bootstrap, вам просто нужно добавить
img-responsive
класс вimg
тег:Bootstrap Изображения
источник
Простое решение (4-х шаговое исправление !!), которое, кажется, работает для меня, ниже. В примере для определения общего размера используется ширина, но вы также можете перевернуть ее, чтобы использовать высоту.
%
относительный размер или автоматическое масштабирование (на основе контейнера изображения или отображения)px
(или другое) для статического или заданного размераНапример,
источник
Все предоставленные ответы, включая принятый, работают только при условии, что
div
оболочка имеет фиксированный размер. Так вот, как это сделать, независимо от размераdiv
оболочки, и это очень полезно, если вы разрабатываете адаптивную страницу:Напишите эти объявления внутри вашего
DIV
селектора:Затем поместите эти объявления в ваш
IMG
селектор:ОЧЕНЬ ВАЖНО:
Значение
maxHeight
должно быть равно для обоихDIV
иIMG
селекторов.источник
Простое решение - использовать flexbox. Определите CSS контейнера для:
Отрегулируйте ширину содержащегося изображения до 100%, и вы должны получить хорошее центрированное изображение в контейнере с сохранением размеров.
источник
Решение легко с небольшим количеством математики ...
Просто поместите изображение в div, а затем в HTML-файл, где вы указываете изображение. Установите значения ширины и высоты в процентах, используя пиксельные значения изображения, чтобы вычислить точное соотношение ширины и высоты.
Например, допустим, у вас есть изображение шириной 200 пикселей и высотой 160 пикселей. Вы можете с уверенностью сказать, что значение ширины будет 100%, потому что это большее значение. Чтобы затем вычислить значение высоты, вы просто делите высоту на ширину, которая дает процентное значение 80%. В коде это будет выглядеть примерно так ...
источник
Самый простой способ сделать это с помощью
object-fit
:Если вы используете Bootstrap, просто добавьте
img-responsive
класс и измените наисточник
Проверьте мой ответ, Сделайте изображение отзывчивым - самый простой способ -
источник
Или вы можете просто использовать:
Теперь изображение займет все пространство div.
источник