Как мне автоматически изменить размер изображения, чтобы он соответствовал контейнеру div?


1514

Как автоматически изменить размер большого изображения, чтобы оно помещалось в контейнер div меньшей ширины при сохранении соотношения ширины и высоты?


Пример: stackoverflow.com - когда изображение вставляется в панель редактора, а изображение слишком велико для размещения на странице, размер изображения автоматически изменяется.


Некоторые интересные библиотеки для изменения размера изображения в соответствии с контейнером: * plugins.jquery.com/project/myimgscale * code.google.com/p/jquery-imagefit-plugin
Frosty Z

Помимо ответа @ Kevin ... Вы также можете использовать такие сервисы, как ImageBoss, чтобы создавать изображения с нужным вам размером по запросу. Размещение изображения на контейнере - это замечательно, но ответное обслуживание изображений - более сложная задача.
Игорь Эскобар

Возможный дубликат: stackoverflow.com/questions/1891857/…
jolumg

@jolumg Не совсем; в то время как в некоторых решениях есть много совпадений, есть также много решений, которые не являются взаимозаменяемыми, так как этот вопрос спрашивает, как увеличить изображение, в то время как этот просит уменьшить изображение.
TylerH

1
001 - Это ответ на ваш вопрос, который был закрыт до того, как я его увидел. Как вызвать дочерний компонент из родительского компонента. Я написал сообщение в блоге, объясняющее, как заставить компоненты взаимодействовать с помощью интерфейсов: datajugglerblazor.blogspot.com/2020/01/…
Data Juggler

Ответы:


1879

Не применяйте явную ширину или высоту к тегу изображения. Вместо этого дайте это:

max-width:100%;
max-height:100%;

Также, height: auto;если вы хотите указать только ширину.

Пример: http://jsfiddle.net/xwrvxser/1/

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}
Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>


40
Это не будет масштабировать как высоту, так и ширину.
Нил

75
высота: авто; если вы хотите указать только ширину
Roi

82
Что делать, если изображение слишком маленькое?
Скотт Риппи

18
@Scott Rippey - если изображение меньше контейнера, оно не изменится, поскольку используются следующие правила: max-width и max-height.
Сюрреалистические сны

15
С включенным <a>тегом изображение не изменилось. Применение правил к A-тегу решило эту проблему.
SPRBRN

433

Объект посадки

Оказывается, есть еще один способ сделать это.

<img style='height: 100%; width: 100%; object-fit: contain'/>

сделаю работу. Это CSS 3 вещи.

Скрипка: http://jsfiddle.net/mbHB4/7364/


39
Это позволит масштабировать изображение, чтобы оно полностью соответствовало большему измерению в контейнере, поэтому меньшее измерение может не полностью покрыть его. Чтобы обрезать большее измерение вместо этого, используйтеobject-fit: cover
Габриэль Грант

4
Работал для меня - по сравнению с решением @KevinD - это НЕ изменило пропорции в крайних случаях. Ура!
Варнава Кечскис

9
Будет здорово, когда будет полностью поддерживаться. К сожалению, ни IE, ни Edge не поддерживают его.
спектры

2
Если вы хотите установить максимальную ширину и максимальную высоту, вы можете сделать это. Работает отлично.
Сандип Субеди

3
Кажется, что нельзя использовать с IE11 и edge 14/15, хотя -> caniuse.com/#search=object-fit
mcorbe

106

В настоящее время нет способа сделать это правильно детерминированным способом с помощью изображений фиксированного размера, таких как файлы JPEG или PNG.

Чтобы изменить размер изображения пропорционально, вы должны установить либо высоту или ширину до «100%», но не оба.Если вы установите оба значения на «100%», ваше изображение будет растянуто.

Выбор высоты или ширины зависит от вашего изображения и размеров контейнера:

  1. Если ваше изображение и контейнер имеют "портретную форму" или обе "ландшафтной формы" (выше, чем они широкие, или шире, чем они высокие, соответственно), то не имеет значения, какая из высоты или ширины равна "% 100" ,
  2. Если ваше изображение - портретное, а контейнер - альбомное, вы должны установить height="100%"на него изображение.
  3. Если ваше изображение в альбомной ориентации, а контейнер - в портретном, вы должны установить width="100%"на изображение.

Если ваше изображение представляет собой SVG, который представляет собой векторный формат изображения переменного размера, у вас может быть расширение, чтобы оно подходило для контейнера автоматически.

Вам просто нужно убедиться, что SVG-файл не имеет ни одного из этих свойств, установленных в <svg>теге:

height
width
viewbox

Большинство программ векторного рисования устанавливают эти свойства при экспорте файла SVG, поэтому вам придется вручную редактировать файл каждый раз при экспорте или писать скрипт для этого.


2
Это только я или есть несколько ошибок в этом посте? "'в форме портрета' или оба 'в форме пейзажа' (шире, чем они высоки, и выше, чем они широки, соответственно)" ... разве ваши "родственники" не должны переключаться? И в ваших пунктах 2. и 3. они говорят: "Вы должны установить width =" 100% "на изображении". Я предполагаю, что вы скопировали и забыли изменить один из них на "высоту", а не "ширину".
Баттл Буткус

Просто исправил это. 2 и 3 теперь могут быть и неправильными, или оба правильными, вместо того, чтобы один был неправильным, а другой - правильным. Я не могу вспомнить, каков правильный ответ. ;)
Нил

2
«В настоящее время нет способа сделать это правильно детерминированным способом с помощью изображений фиксированного размера, таких как JPEG или PNG». Это кажется просто неверным. Ответ @ Thorn007 дает такой способ, и я сам использовал его - stackoverflow.com/questions/12259736/…
Дэн Даскалеску

Ответ @DanDascalescu Thorn007 не расширяет изображение, если оно меньше контейнера. Наилучшее решение в настоящее время - использовать элемент с фоновым изображением и набором background-size: contain.
Кевин Бордерс

«Чтобы пропорционально изменить размер изображения, вы должны установить для высоты или ширины значение« 100% », но не для обоих». <Это было именно то, что помогло мне. Спасибо
Александр Сантос

77

Вот решение, которое выровняет ваш img по вертикали и горизонтали в пределах div без растягивания, даже если предоставленное изображение слишком маленькое или слишком большое, чтобы поместиться в div.

Содержание HTML:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

Содержание CSS:

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

Часть JQuery:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

1
CSS работает точно так, как я хочу, и я пропустил бит jQuery
bkwdesign

48

Сделай это проще!

Дайте контейнеру фиксированный, height а затем для imgтега внутри него установите widthи max-height.

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

Разница в том, что вы установили width100%, а не max-width.


2
Это приводит к изменению соотношения изображений в Google Chrome, если изображение очень высокое, а область просмотра короткая.
Микко Ранталайнен

29

Прекрасный хак.

У вас есть два способа сделать изображение отзывчивым.

  1. Когда изображение является фоновым изображением.
#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

Запустите это здесь


Но нужно использовать imgтег , чтобы поместить изображения , как это лучше , чем background-imageс точки зрения SEO , как вы можете написать ключевое слово в altв imgтеге. Так что вот вы можете сделать изображение отзывчивым.

  1. Когда изображение в imgтеге.
#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Запустите это здесь


23

Вы можете установить изображение в качестве фона для div, а затем использовать свойство background-size CSS :

background-size: cover;

Он «масштабирует фоновое изображение до максимально возможного размера, чтобы фоновая область была полностью покрыта фоновым изображением. Некоторые части фонового изображения могут не отображаться в пределах области позиционирования фона» - W3Schools


Я полагаю, что под «соответствием контейнеру div» ОП означало, что изображение не должно выходить за пределы содержащего элемента в любом измерении. В решении @JonatasWalker изображение обрезается. Также фоновое решение может быть не семантически правильным, в зависимости от ситуации. Например, вам могут понадобиться altзначения и такие вещи (хотя вы также можете добавить фиктивное изображение, которое будет невидимым для технологий, не являющихся помощниками), или вам может потребоваться сделать его кликабельным.
Balázs

@ Balázs ах в этом случае правильная настройка будет, background-size: containи я думаю, что лично я пойду по пути фиктивного изображения только потому, что нет действительно простого способа сделать то, что описано здесь без JavaScript
Чак Дрис

@ChuckDries Я не совсем уверен, что вы имеете в виду, принятый ответ решает проблему.
Balázs

22

Проверьте мое решение: http://codepen.io/petethepig/pen/dvFsA

Он написан на чистом CSS, без какого-либо кода JavaScript. Он может обрабатывать изображения любого размера и любой ориентации.

Учитывая такой HTML:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

код CSS будет:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

2
Это не обрабатывает изображения, которые слишком малы.
Джош С

1
@JoshC Что ты имеешь в виду? Это один работает хорошо: codepen.io/petethepig/pen/maeFo
Димитрия

2
404 на изображениях, которые слишком малы.
Джош С

Я хотел бы отметить, что этот метод также работает с контейнерами переменной ширины. Потрясающая работа Дмитрия!
Камило Мартин

Небольшая модификация и идеально подходит: codepen.io/anon/pen/BoQmBw Спасибо, Дмитрий.
Alqin

10

Я только что опубликовал плагин jQuery, который делает именно то, что вам нужно, с большим количеством опций:

https://github.com/GestiXi/image-scale

Применение:

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JavaScript

$(function() {
    $("img.scale").imageScale();
});

10

Это решение не растягивает изображение и заполняет весь контейнер, но оно обрезает часть изображения.

HTML:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}

9

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

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

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Как только это в центре, я даю изображение,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Это заставляет изображение получить эффект Object-fit: cover.


Вот демонстрация вышеуказанной логики.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Эта логика работает во всех браузерах.


8

Следующее работает отлично для меня:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

7

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

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}
<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

Вы можете установить максимальную ширину и максимальную высоту независимо; изображение будет соответствовать наименьшему (в зависимости от значений и соотношения сторон изображения). Вы также можете настроить изображение так, чтобы оно было выровнено, как вы хотите (например, для изображения товара на бесконечном белом фоне вы можете легко расположить его по центру).


5

Укажите высоту и ширину, необходимую для вашего изображения, div, который содержит тег <img>. Не забудьте указать высоту / ширину в правильном теге стиля.

В теге <img> укажите " max-heightи" max-widthкак 100%.

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

Вы можете добавить детали в соответствующие классы после того, как вы правильно поняли.


5

Код ниже адаптирован из предыдущих ответов и протестирован мной с использованием изображения под названием storm.jpg.

Это полный код HTML для простой страницы, которая отображает изображение. Это прекрасно работает и был проверен мной с www.resizemybrowser.com. Поместите код CSS вверху вашего HTML-кода, под разделом заголовка. Поместите код с изображением туда, куда вы хотите.

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

5
<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>

2
Если бы вы могли добавить какое-то объяснение вашего кода, это было бы неплохо (я знаю, что у вас там есть несколько комментариев, но только несколько слов о том, почему / как это отвечает на вопрос, чтобы он выглядел намного лучше).
отображаемое имя отсутствует

5

Вы должны сообщить браузеру высоту, где вы размещаете его:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

5

Изменить: Предыдущее позиционирование изображения на основе таблицы имели проблемы в Internet Explorer 11 ( max-heightне работает в display:tableэлементах). Я заменил его на встроенное позиционирование, которое не только прекрасно работает как в Internet Explorer 7, так и в Internet Explorer 11, но также требует меньше кода.


Вот мой взгляд на эту тему. Это будет работать только в том случае, если контейнер имеет заданный размер ( max-widthи max-height, похоже, он не ладит с контейнерами, которые не имеют конкретного размера), но я написал CSS-содержимое таким образом, чтобы его можно было использовать повторно (добавить picture-frameкласс а такжеpx125 размер класса для вашего существующего контейнера).

В CSS:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

И в HTML:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

DEMO


Изменить: Возможное дальнейшее улучшение с помощью JavaScript (масштабирование изображений):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

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

5

Я исправил эту проблему, используя следующий код:

<div class="container"><img src="image_url" /></div>
.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

4

Как здесь ответили , вы также можете использовать vhюниты, max-height: 100%если они не работают в вашем браузере (например, Chrome):

img {
    max-height: 75vh;
}

1
Вы имеете в видуvh ? а что не работает в Chrome?
misterManSam

@misterManSam Да, большое спасибо, вчера я был слишком уставшим, когда опубликовал этот ответ. max-height: xx%(процентная единица) не работает в Chrome с некоторыми элементами, как img, но vhединица работает. Однако проценты работать с height, width, max-widthи т.д.
gaborous

4

Я центрировал и масштабировал пропорционально изображение внутри гиперссылки как по горизонтали, так и по вертикали следующим образом:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

Он был протестирован в Internet Explorer, Firefox и Safari.

Больше информации о центрировании здесь .


4

Принятый ответ от Thorn007 не работает, когда изображение слишком маленькое .

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

Пример:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

Ноты:

  1. Для WebKit вы должны добавить -webkit-transform:scale(4); -webkit-transform-origin:left top;в стиле.
  2. С масштабным коэффициентом 4 у вас есть max-width = 400/4 = 100 и max-height = 200/4 = 50
  3. Альтернативное решение - установить max-width и max-height на 25%. Это даже проще.

1
Это не очень надежное решение, если вы пытаетесь поддержать весь рынок. Я держусь подальше от CSS3, если вы не собираетесь использовать какой-то запасной вариант для браузеров, которые его не поддерживают.
dudewad


3

Простое решение (4-х шаговое исправление !!), которое, кажется, работает для меня, ниже. В примере для определения общего размера используется ширина, но вы также можете перевернуть ее, чтобы использовать высоту.

  1. Примените CSS-стиль к контейнеру изображения (например, <img>)
  2. Установите свойство ширины в размер, который вы хотите
    • Для измерений используйте %относительный размер или автоматическое масштабирование (на основе контейнера изображения или отображения)
    • Использовать px(или другое) для статического или заданного размера
  3. Установите свойство высоты для автоматической регулировки на основе ширины
  4. НАСЛАЖДАТЬСЯ!

Например,

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

3

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

Напишите эти объявления внутри вашего DIVселектора:

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

Затем поместите эти объявления в ваш IMGселектор:

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

ОЧЕНЬ ВАЖНО:

Значение maxHeightдолжно быть равно для обоих DIVи IMGселекторов.


1
Правильное объявление CSS в случае верблюда - max-height, а не maxHeight.
Марк Таунсенд

3

Простое решение - использовать flexbox. Определите CSS контейнера для:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

Отрегулируйте ширину содержащегося изображения до 100%, и вы должны получить хорошее центрированное изображение в контейнере с сохранением размеров.


1

Решение легко с небольшим количеством математики ...

Просто поместите изображение в div, а затем в HTML-файл, где вы указываете изображение. Установите значения ширины и высоты в процентах, используя пиксельные значения изображения, чтобы вычислить точное соотношение ширины и высоты.

Например, допустим, у вас есть изображение шириной 200 пикселей и высотой 160 пикселей. Вы можете с уверенностью сказать, что значение ширины будет 100%, потому что это большее значение. Чтобы затем вычислить значение высоты, вы просто делите высоту на ширину, которая дает процентное значение 80%. В коде это будет выглядеть примерно так ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

1

Самый простой способ сделать это с помощью object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Если вы используете Bootstrap, просто добавьте img-responsiveкласс и измените на

.container img{
    object-fit: cover;
}


-1

Или вы можете просто использовать:

background-position:center;
background-size:cover;

Теперь изображение займет все пространство div.


1
речь идет не о выравнивании, а об изменении размера.
Baljeetsingh
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.