Заставить внутреннее изображение соответствовать внешнему размеру div

Question

Я работаю над представлением Toolset в WordPress (я использую SCSS).У меня есть изображения, которые я хочу разместить внутри 300px x 300px div.Я пробовал это:

.container {
max-width: 300px;
max-height: 300px;

& img {
  width:100%;
  height:auto;
}

}

Я знаю, что должен использовать background-image, но я не могу добавить пользовательский файл в div в представлении набора инструментов

Редактировать:

Код вида набора инструментов:

<a href="[wpv-post-url]">
<div class="project_container">
    <div class="project_text">[wpv-post-title]</div>
    [types field="projekt-bild"][/types]
</div>

CSS:

.project_row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center; }

.project_container {
max-width: 300px;
max-height: 300px;

.project_container img {
  width:100%;
  height:auto;
}
}

Но когда я делаю это, все проектыпо размеру соответствуют ширине и высоте изображения, а не контейнеру, который я хочу, чтобы они были бывшими.300px x 300px

Answer 1

Если вы хотите, чтобы ваше изображение велось как CSS-фоновое изображение, используйте подгонку объекта.

SCSS

.project_container {
    //  set relative position to make the
    //  image position to the post itself
    position: relative;

    //  random post size 
    //  not important for this to work
    width: 340px;
    height: 500px;



    img { 
        //  make image stretch to container 
        //  and show below content 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;

        //  object fit for modern browsers
        object-fit: cover;
        object-position: center;

        //  fallback 
        //  using js the image source is replaced with a transparant gif
        //  and the original is added as background image
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

JS fix для старых браузеров, которые не поддерживают подгонку объектов

//  is object fit supported
if (document.body.style.objectFit === undefined) {

    //  loop through all images    
    [].slice
        .call(document.querySelectorAll('img'))
        .map(img => {

        //  image has background-size cover or contain        
        if(['cover', 'contain']
           .indexOf(getComputedStyle(img).backgroundSize) !== -1) {

            //  use src as background image            
            img.style.backgroundImage = `url(${img.src})`;

            //  replace src with transparent gif
            img.src = 'data:;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
        }
    });
}



/*

Transpiled version
if (document.body.style.objectFit === undefined) {
    [].slice
        .call(document.querySelectorAll('img'))
        .map(function (img) {
        if (['cover', 'contain']
            .indexOf(getComputedStyle(img).backgroundSize) !== -1) {
            img.style.backgroundImage = "url(" + img.src + ")";
            img.src = 'data:;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
        }
    });
}

Transpiled and minified
void 0===document.body.style.objectFit&&[].slice.call(document.querySelectorAll("img")).map(function(A){-1!==["cover","contain"].indexOf(getComputedStyle(A).backgroundSize)&&(A.style.backgroundImage="url("+A.src+")",A.src="data:;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")});


*/

Демонстрация: https://codepen.io/jakob-e/pen/Pxwzpw

Answer 2

Как и в комментарии, вы хотите поведение image, например backgroud-img

, см. Рабочий код здесь

.project_container {
max-width: 300px;
max-height: 300px;
position: relative;

& .project_text{
  position: absolute;
  top:0;
}
& img {
  width:100%;
}
}