Як ви автоматично змінюєте розмір великого зображення, щоб він вміщувався в контейнер з меншою шириною, зберігаючи його співвідношення ширина: висота?

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

Не застосовуйте явну ширину чи висоту до тегу зображення. Натомість дайте:

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>

об'єкт-придатний

Виявляється, є ще один спосіб зробити це.

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

зробить роботу. Це CSS 3 речі.

Fiddle: http://jsfiddle.net/mbHB4/7364/

В даний час немає можливості зробити це правильно детермінованим способом із зображеннями фіксованого розміру, такими як JPEG або PNG-файли.

Щоб змінити розмір зображення пропорційно, ви повинні встановити або висоту або ширину до «100%», але не обидва. Якщо встановити обидва значення "100%", ваше зображення буде розтягнуто.

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

1. Якщо ваше зображення та контейнер мають форму «портрет» або обидві «пейзажної форми» (вони вищі за ширину, або ширше, ніж вони відповідно), то не має значення, висота чи ширина яких є «% 100» .
2. Якщо ваше зображення є портретним, а ваш контейнер - пейзажним, ви повинні встановити height="100%"його.
3. Якщо ваше зображення є пейзажним, а ваш контейнер - портретним, ви повинні встановити width="100%"його.

Якщо ваше зображення являє собою SVG, який є форматом векторного зображення змінного розміру, ви можете мати розширення, щоб вміст контейнера відбувався автоматично.

Вам просто потрібно переконатися, що у файлі SVG немає жодного з цих властивостей, встановлених у <svg>тегу:

height
width
viewbox

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

Ось рішення, яке і вертикально, і горизонтально вирівняє ваш малюнок у розділі без будь-якого розтягування, навіть якщо надане зображення занадто мало або занадто велике, щоб вмістити його в діву.

Вміст 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>

Різниця полягає в тому, що ви встановлюєте значення width100%, а не значення 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>

Виконати його тут

Ви можете встановити зображення як фон для діва, а потім використовувати властивість розміру фону CSS :

background-size: cover;

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

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

Я щойно опублікував плагін 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();
});

Це рішення не розтягує зображення і заповнює весь контейнер, але воно скорочує частину зображення.

HTML:

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

CSS:

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

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

Я бачу, що багато людей запропонували підходити до об'єктів, що є хорошим варіантом. Але якщо ви хочете, щоб він працював і в старих браузерах , є інший спосіб зробити це легко.

Його досить просто. Я застосував такий підхід - розташувати зображення всередині контейнера з абсолютним, а потім розмістити його прямо в центрі за допомогою комбінації:

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/

Ця логіка працює у всіх браузерах.

Наступне для мене прекрасно працює:

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>

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

Надайте потрібну для вашого зображення висоту та ширину ділу, який містить тег <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>

Ви можете додати реквізити у відповідні класи після того, як ви правильно зрозумієте.

Код нижче адаптований з попередніх відповідей і перевіряється мною за допомогою зображення, яке називається 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>

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

Ви повинні повідомити веб-переглядачу висоту, де його розміщуєте:

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

Редагувати: Попереднє позиціонування зображень на основі таблиці мало проблеми в 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

/* 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) };
});

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

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

Як відповів тут , ви також можете використовувати vhблоки замість того, max-height: 100%якщо він не працює у вашому веб-переглядачі (як-от Chrome):

img {
    max-height: 75vh;
}

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

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

Більше інформації про центрування тут .

Прийнята відповідь від 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 ви маєте максимальну ширину = 400/4 = 100 і максимальну висоту = 200/4 = 50
3. Альтернативним рішенням є встановлення максимальної ширини та максимальної висоти на 25%. Це ще простіше.

Якщо ви використовуєте Bootstrap, вам просто потрібно додати img-responsiveклас до imgтегу:

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

Завантаження зображень

Просте рішення (виправлення в 4 кроки !!), яке, здається, працює для мене, наведено нижче. У прикладі використовується ширина для визначення загального розміру, але ви також можете перевернути його, щоб використовувати замість висоти.

1. Застосувати CSS-стиль до контейнера зображень (наприклад, <img>)
2. Встановіть властивість ширини на потрібний розмір
   • Для розмірів використовуйте %відносний розмір або автоматичне масштабування (на основі контейнера зображень або дисплея)
   • Використовуйте px(або інше) для статичного або заданого виміру
3. Встановіть властивість висоти для автоматичного регулювання залежно від ширини
4. Насолоджуйтесь!

Наприклад,

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

Усі надані відповіді, включаючи прийнятий, працюють лише за умови, що 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селекторів.

Просте рішення - використовувати флексбокс. Визначте CSS контейнера на:

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

Відрегулюйте розмір зображення, що міститься, на 100%, і ви повинні отримати приємне зосереджене зображення в контейнері із збереженими розмірами.

Рішення легко з трохи математики ...

Просто покладіть зображення в div, а потім у файл HTML, де ви вказуєте зображення. Встановіть значення ширини та висоти у відсотках, використовуючи значення пікселів зображення, щоб обчислити точне відношення ширини до висоти.

Наприклад, скажімо, у вас є зображення, яке має ширину 200 пікселів і висоту 160 пікселів. Можна сміливо сказати, що значення ширини становитиме 100%, тому що це більше значення. Щоб потім обчислити значення висоти, ви просто розділите висоту на ширину, яка дає значення відсотка 80%. У коді це буде виглядати приблизно так ...

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

Найпростіший спосіб зробити це за допомогою 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;
}

Перевірте мою відповідь. Зробіть зображення чуйним - найпростіший спосіб -

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

Або ви можете просто скористатися:

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

Тепер зображення займе весь простір діва.