使内部图像响应外部 div 大小

Question

我正在处理 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;
}
}

但是当我这样做时，所有项目的大小都像图像宽度和高度一样，而不是我希望它们成为 ex 的容器。 300 像素 x 300 像素

Answer 1

如果您希望您的图像表现得像 CSS 背景图像，请使用 object-fit。

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 修复，适用于不支持 object-fit 的旧版浏览器

//  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

see working code here

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

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