Содержать изображение внутри div?

Question

Я хочу поместить изображение в 250 x 250 деление, заставляя изображение изменять размер, но не растягивать. Как я могу это сделать? Кстати, изображение обычно будет больше, чем сам div, поэтому изменение размера входит в картинку.

<div id = "container">
  <img src = "whatever" />
</div>

#container { width:250px; height:250px; border:1px solid #000; }

Вот jsfiddle, который кто-то может редактировать:

http://jsfiddle.net/rV77g/

Answer 1

Используйте максимальную ширину и максимальную высоту. Это сохранит соотношение сторон

#container img 
{
 max-width: 250px;
 max-height: 250px;
}

http://jsfiddle.net/rV77g/

Answer 2

object-fit, ведет себя как background-size, решая проблему масштабирования изображений вверх и вниз для подгонки.

Свойство object-fit CSS определяет, как содержимое заменяемого элемента должно быть вписано в блок, определяемый его используемой высотой и шириной.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

.cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

---

Поддержка браузеров

В IE отсутствует поддержка, и поддержка в Edge начинается с версии v16, только для элемента img: https://caniuse.com/#search=object-fit

Полифилл bfred-it / object-fit-images отлично работает для меня в IE11, протестировано на Browserstack: demo .

---

Альтернатива без полизаполнения с использованием изображения в SVG

Для Edge pre v16 и ie9, ie10, ie11:

Вы можете обрезать и масштабировать любое изображение, используя CSS object-fit и object-position. Однако эти свойства поддерживаются только в последней версии MS Edge, а также во всех других современных браузерах.

Если вам нужно обрезать и масштабировать изображение в Internet Explorer и предоставить поддержку обратно в IE9, вы можете сделать это, обернув изображение в и используя атрибуты viewBox и preserveAspectRatio, чтобы сделать то, что object-fit и object-position до.

http://www.sarasoueidan.com/blog/svg-object-fit/#summary-recap

(Автор подробно объясняет методику, и дублирование деталей здесь нецелесообразно.)

Answer 3

Вы должны стилизовать изображение как это

#container img{width:100%;}

и контейнер со скрытым переполнением:

#container{width:250px; height:250px; overflow:hidden; border:1px solid #000;} 

Answer 4

Вот javascript, который я написал, чтобы сделать именно это.

function ImageTile(parentdiv, imagediv) {
imagediv.style.position = 'absolute';

function load(image) {
    //
    // Reset to auto so that when the load happens it resizes to fit our image and that
    // way we can tell what size our image is. If we don't do that then it uses the last used
    // values to auto-size our image and we don't know what the actual size of the image is.
    //
    imagediv.style.height = "auto";
    imagediv.style.width = "auto";
    imagediv.style.top = 0;
    imagediv.style.left = 0;

    imagediv.src = image;
}

//bind load event (need to wait for it to finish loading the image)
imagediv.onload = function() {
    var vpWidth = parentdiv.clientWidth;
    var vpHeight = parentdiv.clientHeight;
    var imgWidth = this.clientWidth;
    var imgHeight = this.clientHeight;

    if (imgHeight > imgWidth) {
        this.style.height = vpHeight + 'px';
        var width = ((imgWidth/imgHeight) * vpHeight);
        this.style.width = width + 'px';
        this.style.left = ((vpWidth - width)/2) + 'px';
    } else {
        this.style.width = vpWidth + 'px';
        var height = ((imgHeight/imgWidth) * vpWidth);
        this.style.height = height + 'px';
        this.style.top = ((vpHeight - height)/2) + 'px';
    }
};

return {
    "load": load
};

}

И чтобы использовать его, просто сделайте что-то вроде этого:

 var tile1 = ImageTile(document.documentElement, document.getElementById("tile1"));
 tile1.load(url);

Я используюэто для слайд-шоу, в котором у меня есть две из этих «плиток», и я постепенно исчезаю, а другая - внутри. Загрузка выполняется на «плитке», которая не видна, чтобы избежать неприятного визуального эффекта сброса стиля назад.на «авто».

Answer 5

Поскольку вы не хотите растягивать (все остальные ответы игнорируют это), вы можете просто установить max-width и max-height, как в моем jsFiddle edit .

#container img {
    max-height: 250px;
    max-width: 250px;
} 

Посмотрите мой пример с изображением, которое не является квадратом, оно не растягивается

Answer 6

  <div id ="container">
    <img src = "http://animalia-life.com/data_images/duck/duck9.jpg"/>

#container img {
        max-width:250px;
        max-height:250px;
        width: 250px;
        height: 250px;
        border:1px solid #000;
    }

IMG потеряет соотношение сторон

Answer 7

#container img{
 height:100%;
 width:100%;   
}