Как мне разместить изображение (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%;для изображения внутри div.

К сожалению, max-width + max-height не полностью покрывают мою задачу ... Поэтому я нашел другое решение:

Чтобы сохранить соотношение изображения при масштабировании, вы также можете использовать object-fitCSS3 propperty.

Полезная статья: Управление пропорциями изображения с помощью 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.

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

Я понял, что мне нужно настроить отображение div на flex, так что в основном это мой 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%;центрировать верхний левый угол img в контейнере
• 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 - это маленькое прозрачное изображение с таким же соотношением сторон, что и у photo.jpg. Если фотография представляет собой квадрат, это заполнитель размером 1 × 1 пиксель, если фотография представляет собой миниатюру видео, это заполнитель размером 16 × 9 и т. Д.

В зависимости от вопроса, используйте заполнитель 1x1 для поддержания квадратного соотношения div, а фоновое изображение - background-sizeдля сохранения пропорций фотографии.

Я использовал, background-position: center center;так что фото будут по центру в div. (Выравнивание фотографии по вертикали по центру или снизу может быть уродливым с фотографией в теге 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-запроса, преобразуйте изображение-заполнитель в data: URL .

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

Вы можете использовать класс "img-liquid" для более новой версии, т.е. Bootstrap v4 .

и может использовать класс «img-responseive» для более старой версии, такой как Bootstrap v3 .

Использование : -

img тег с: -

класс = "img-жидкость"

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