Как мне подобрать образ (img) внутри div и сохранить соотношение сторон?

Ответ 1

Вам понадобится 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, вы можете воспользоваться ею.

Ответ 2

Используйте max-height:100%; max-width:100%; для изображения внутри div.

Ответ 3

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

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

Полезная статья: Управление пропорциями изображения с CSS3

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

Плохая новость: IE не поддерживается (Могу ли я использовать)

Ответ 4

Использование только CSS:

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

Ответ 5

HTML

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

CSS

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

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

Это приведет к тому, что изображение будет развернуто, чтобы заполнить его родительский элемент, размер которого задан в div CSS.

Ответ 6

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

Я понял, что мне нужно было отключить отображение div, так что в основном это мой CSS:

div{
display: flex;
}

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

Ответ 7

Попробуйте CSS:

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

Ответ 8

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

Ниже, если мы хотим, чтобы div был таким же соотношением сторон, как и фотография, тогда placeholder.png представляет собой небольшое прозрачное изображение с тем же соотношением сторон, что и photo.jpg. Если фотография представляет собой квадрат, это 1px x 1px placeholder, если фотография - миниатюра для видео, это заполнитель 16x9 и т.д.

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

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

Ответ 9

Для меня работал следующий 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%);
}

Ответ 10

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

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

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

img с: -

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

src= "..."

Ответ 11

Здесь весь подход 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);
});

Не стесняйтесь копировать и вставлять напрямую.