Question

我正在WordPress中使用工具集视图（我正在使用SCSS）。我有想要放在300px x 300px div内的图像。我已经尝试过：

android:background

}

我知道我应该使用.container { max-width: 300px; max-height: 300px; & img { width:100%; height:auto; }，但无法在工具集视图中将自定义文件添加到div

编辑：

工具集查看代码：

background-image

CSS：

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

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

Answer 1

在评论中，您希望具有image之类的backgroud-img行为

https://developer.android.com/guide/components/intents-common#SendMessage

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

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

Answer 2

如果您希望图像表现得像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修复，用于不支持对象适配的较旧浏览器

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

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

2 个答案: