HTML:
<div class="picdiv">
<!-- <img src={backpic}> -->
<div class="picdivchild slds-text-heading_small">{checkNo}</div>
</div>
CSS:
.picdiv {
background-position: top right;
background-repeat: no-repeat;
background-size: 100%;
display: flex;
flex-flow: column;
align-items: center;
justify-content:space-between;
}
.picdivchild {
align-items: center;
margin-top: 60%;
margin-bottom: 5%;
}
JS:
import gymsimgs from '@salesforce/resourceUrl/gymsimgs';
hasRendered = false;
renderedCallback() {
if (this.hasRendered) return;
this.hasRendered = true;
const style = document.createElement('style');
style.innerText = `.picdiv { background-image:url(${this.backpic}) }`;
this.template.querySelector('.picdiv').appendChild(style);
}
get picb4() {
return gymsimgs + '/ver_b_4.png';
}
get backpic() {
return gymsimgs + '/ver_b_1.png';
}
css 参考URL
Flex:
https://www.plusdesign.co.jp/blog/?p=8747