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

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

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

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

сделаю работу. Это CSS 3 штучки.

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

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

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

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

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

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

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

height
width
viewbox

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

Вот решение, которое выровняет ваш 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);
    }

Упрости!

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

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

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

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

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

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>

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

2. Когда изображение в теге 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>

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

Проверьте мое решение: 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 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;
}

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

background-size: cover;

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

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

HTML:

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

CSS:

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

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

Я только что опубликовал плагин 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();
});

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

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

У меня есть гораздо лучшее решение без необходимости 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>

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

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

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

Код ниже адаптирован из предыдущих ответов и протестирован мной с использованием изображения 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>

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

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

/* Main style */

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

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.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 */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}

<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

Изменение: Возможное дальнейшее улучшение с помощью 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) };
});

<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>

Принятый ответ от 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; -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%. Это даже проще.

Укажите высоту и ширину, необходимую для вашего изображения, в 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>

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

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

#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.

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

Все предоставленные ответы, включая принятый, работают только при условии, что 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.

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

img {
    max-height: 75vh;
}

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

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

Например,

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

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

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

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

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Bootstrap Изображения

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

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

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

Самый простой способ сделать это с помощью 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;
}

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

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

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

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

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

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

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

Проверьте мой ответ, Сделайте изображение отзывчивым - самый простой способ -

img{
    width: 100%;
    max-width: 800px;
}

Определите div просто так:

div.headerimg1 {
   position: absolute;
   top: 290px;
   left: 81px;
   width: 389px;
   height: 349px;
}

<div class="headerimg1">
    <img src="" style="max-height:100%;height:auto;width:100%;max-width:100%;margin:auto;display:inline;">
</div>