Я працюю з зображеннями, і я зіткнувся з проблемою із співвідношенням сторін.

<img src="big_image.jpg" width="900" height="600" alt="" />

Як бачите, heightі widthвже вказані. Я додав правило CSS для зображень:

img {
  max-width:500px;
}

Але бо big_image.jpgя отримую width=500і height=600. Як я можу встановити зображення, які слід змінити розмір, зберігаючи їх співвідношення сторін.

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Це призведе до зменшення зображення, якщо воно занадто велике для вказаної області (як і вниз, воно не збільшить зображення).

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

object-fit: cover;
width: 100%;
height: 250px;

Ви можете налаштувати ширину та висоту, щоб відповідати вашим потребам, а властивість об'єкта зробить обрізку за вас.

Ура.

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

Усі зображення мають батьківський контейнер із фіксованою шириною лише для демонстраційних цілей . У виробництві це буде ширина материнської коробки.

Краща практика (2018):

Це рішення повідомляє браузеру рендерувати зображення з максимальною доступною шириною та регулювати висоту у відсотках до цієї ширини.

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

Фантастичне рішення:

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

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

Для рядка із зазначенням прокладки потрібно обчислити співвідношення сторін зображення, наприклад:

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

Отже, верхня підкладка = 34,37%.

Властивість фонового розміру становить лише> = 9, але якщо це добре з вами, ви можете використовувати div background-imageі встановити background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Тепер ви можете просто встановити розмір Div на все, що завгодно, і не тільки, що зображення збереже співвідношення сторін, воно також буде централізовано як вертикально, так і горизонтально в розділі. Просто не забудьте встановити розміри на css, оскільки у divs немає атрибуту ширина / висота у самому тезі.

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

Редагувати: Відповідно до документації щодо розміру фону MDN, ви можете імітувати властивість розміру фону в IE8 за допомогою власного декларації фільтра:

Хоча Internet Explorer 8 не підтримує властивість розміру фону, можна емулювати частину його функцій за допомогою нестандартної функції -ms-filter:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

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

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

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

Видаліть властивість "висота".

<img src="big_image.jpg" width="900" alt=""/>

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

Необов’язково, щоб обмежити завищення розміру:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Просто додайте це до свого css, воно автоматично зменшиться та розшириться, зберігаючи початкове співвідношення.

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

Там немає ніякого стандартного способу , щоб зберегти пропорції для зображень з width, heightі max-widthвказані разом.

Тому ми змушені або вказувати, widthі heightне допускати стрибків сторінок під час завантаження зображень, або використовувати max-widthта не визначати розміри для зображень.

Вказання просто width(без height) зазвичай не має великого сенсу, але ви можете спробувати замінити heightатрибут HTML, додавши таке правило, як IMG {height: auto; }у вашу таблицю стилів.

Дивіться також пов’язану помилку Firefox 392261 .

Ось рішення:

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

Це дозволить переконатися, що зображення завжди охоплює весь батьківський (зменшення та зменшення масштабів) та зберігає однакове співвідношення сторін.

Встановіть клас CSS вашого тегу контейнера зображень на image-class:

<div class="image-full"></div>

і додайте це вам свою таблицю стилів CSS.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

Щоб зберегти чуйне зображення, зберігаючи зображення, мати певне співвідношення сторін, ви можете зробити наступне:

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

І SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

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

Дякуємо @Kseso за адресою http://codepen.io/Kseso/pen/bfdhg . Перевірте цю URL-адресу для отримання більше співвідношень та робочого прикладу.

Щоб змусити зображення, які відповідають точному розміру, не потрібно писати занадто багато кодів. Це так просто

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

https://jsfiddle.net/sot2qgj6/3/

Ось відповідь, якщо ви хочете розмістити зображення з фіксованим відсотком ширини , але не фіксованим пікселем ширини .

І це стане в нагоді при роботі з різним розміром екрана .

Трюки є

1. Використовується padding-topдля встановлення висоти від ширини.
2. Використовуйте position: absoluteдля розміщення зображення в просторі оббивки.
3. Використовуючи, max-height and max-widthщоб переконатися, що зображення не буде над батьківським елементом.
4. за допомогою display:block and margin: autoцентрування зображення.

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

Я також знаходжу деякі інші способи зробити це. Реального зображення в html не буде, тому я особисто довіряю верхню відповідь, коли мені потрібен елемент "img" у html.

простий css, використовуючи фон http://jsfiddle.net/4660s79h/2/

фонове зображення із словом зверху http://jsfiddle.net/4660s79h/1/

концепція використання абсолютної позиції звідси http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Ви можете скористатися цим:

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Ви можете створити подіб так:

<div class="image" style="background-image:url('/to/your/image')"></div>

І використовуйте цей css, щоб стилізувати його:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

Я б запропонував для чуйного підходу найкращою практикою було б використання одиниць Viewport та атрибутів min / max наступним чином:

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

Це призведе до зменшення зображення, якщо воно занадто велике для вказаної області (як і вниз, воно не збільшить зображення).

Рішення від setec чудово підходить для "Зменшитись у відповідності" в автоматичному режимі. Але, щоб оптимально РОЗШИРИТИ, щоб увімкнути режим «автоматичний», вам потрібно спочатку помістити отримане зображення в темп-ідентифікатор, Перевірте, чи можна його розширити по висоті чи ширині (залежно від пропорції в / с співвідношення сторін ваш блок відображення),

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

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

Як щодо використання псевдоелемента для вертикального вирівнювання? Цей менший код призначений для каруселі, але я думаю, він працює на кожному контейнері фіксованого розміру. Він збереже співвідношення сторін і вставить @ сірі-темні смуги вгорі / внизу або вліво / записати для найкоротшого розміру. Тим часом зображення зосереджено горизонтально за допомогою вирівнювання тексту та вертикалі псевдоелементом.

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

Повноекранна презентація:

img[data-attribute] {height: 100vh;}

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

Я думаю, нарешті, що це найкраще рішення, легке та просте :

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}