Як мені помістити зображення (img) всередині div і зберегти співвідношення сторін?

У мене є div 48x48, і всередині нього є елемент img, я хочу вписати його в div, не втрачаючи жодної частини, в середньому час зберігається співвідношення, це досяжно за допомогою html та css?

Вам знадобиться трохи JavaScript для запобігання обрізання, якщо ви не знаєте розмір зображення під час написання CSS.

HTML та JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

Якщо ви використовуєте бібліотеку JavaScript, ви можете скористатися нею.

Використовуйте max-height:100%; max-width:100%;для зображення всередині діл.

На жаль, max-width + max-height не повністю покривають моє завдання ... Тож я знайшов інше рішення:

Для збереження співвідношення зображень при масштабуванні ви також можете використовувати object-fitвластивість CSS3.

Корисна стаття: Контроль співвідношення сторін зображення за допомогою CSS3

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

Погані новини: IE не підтримується ( чи можу я використовувати )

Лише за допомогою CSS:

div > img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}

HTML

<div>
    <img src="something.jpg" alt="" />
</div>

CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

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

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

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

div{
display: flex;
}

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

Спробуйте CSS:

img {
  object-fit: cover;
  height: 48px;
}

Для мене працювали такі CSS (тестовані в Chrome, Firefox та Safari).

Є кілька речей, які працюють разом:

• max-height: 100%;, max-width: 100%;І height: auto;, width: auto;щоб масштаб IMG в залежності від того , проставляння розмірів вперше досягне 100%, зберігаючи при цьому співвідношення сторін
• position: relative;в контейнері та position: absolute;в дочірній частині разом із центром верхнього лівого кута малюнка в контейнері top: 50%;та left: 50%;центром його
• transform: translate(-50%, -50%); переміщує img назад вліво та вгору на половину його розміру, тим самим центрируючи img у контейнері

CSS:

.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

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

Нижче, якщо ми хочемо, щоб div було таким самим співвідношенням сторін, як фото, то placeholder.png - це невелике прозоре зображення з тим самим співвідношенням сторін, як фото.jpg. Якщо фотографія є квадратом, це заповнення 1px x 1px, якщо фотографія - це мініатюра відео, це заповнення 16x9 тощо.

Специфічне для питання, використовуйте заповнювач 1х1, щоб підтримувати квадратний коефіцієнт діва, фонове зображення використовуйте background-sizeдля підтримки співвідношення сторін фотографії.

Я використав, background-position: center center;щоб фото було по центру в діві. (Вирівнювання фотографії у вертикальному центрі чи внизу стає некрасивим із фотографією у тезі img.)

div {
    background: url(photo.jpg) center center no-repeat;
    background-size: contain;
    width: 48px; // or a % in responsive layout
}
img {
    width: 100%;
}

<div><img src="placeholder.png"/></div>

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

<img src="data:image/png;base64,..."/>

ви можете використовувати клас "img-fluid" для нової версії, тобто Bootstrap v4 .

і може використовувати клас "img-respovable" для старішої версії, наприклад Bootstrap v3 .

Використання : -

тег img з: -

class = "img-fluid"

src = "..."

Ось весь підхід JavaScript. Він збільшує масштаб зображення поступово вниз, доки він не підходить правильно. Ви вибираєте, скільки його стискати кожного разу, коли це не вдасться. Цей приклад зменшує його на 10% кожного разу, коли він не працює:

let fit = function (el, w, h, percentage, step)
{
    let newH = h;
    let newW = w;

    // fail safe
    if (percentage < 0 || step < 0) return { h: h, w: w };
    if (h > w)
    {
        newH = el.height() * percentage;
        newW = (w / h) * newH;
        if (newW > el.width())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }
    else
    {
        newW = el.width() * percentage;
        newH = (h / w) * newW;
        if (newH > el.height())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }

    return { h: newH, w: newW };
};

img.bind('load', function ()
{
    let h = img.height();
    let w = img.width();
    let newFit = fit($('<img-wrapper-selector>'), w, h, 1, 0.1);

    img.width(newFit.w);
    img.height(newFit.h);
});

Сміливо скопіюйте та вставте безпосередньо.

Що для мене працювало:

<div style='display: inline-flex; width: 80px; height: 80px;'>
<img style='max-width: 100%; max-height: 100%' src='image file'>
</div>

inline-flex був необхідний, щоб зображення не виходило за межі діва.