javascript - 如何在具有特定百分比的父div中显示具有背景尺寸封面的图像(How to display an image with background-size cover in a parent div with specific percentage)

Question

I want to display an image with dimensions 63x88 using background-size: cover .(我想使用background-size: cover显示尺寸为63x88的图像。)

I want the image height to be a size of a percentage of the parent div.(我希望图像高度为父div百分比的大小。) I tried it but it doesn't show the complete image.(我试过了，但是没有显示完整的图像。)

 body { margin: 0; position: relative; height: 0; width: 100%; padding-bottom: 62.5%; } .pokerf { position: absolute; width: 100%; height: 100%; background: lightblue; } .table { position: absolute; top: 10%; left: 10%; width: 80%; height: 70%; border-radius: 100px; background: green; box-shadow: 0px 0px 1px 1px black; } .button { position: absolute; background: white; border-radius: 50%; width: 1.4em; height: 1.4em; text-align: center; vertical-align: middle; line-height: 1.4em; font-size: 1em; } .middle.card { position: absolute; width: 10%; height: 10%; } .card { border: solid 1px black; width: 100%; height: 100%; background: yellow; background-size: cover; } .ace.hearts { background-image: url('http://placehold.jp/3d4070/ffffff/63x88.png?css=%7B%22border-radius%22%3A%2215px%22%7D') } 

 <div class="pokerf five"> <div class='table'> <div class='tablebg'></div> <div class='button one'>B</div> <div class="middle flop1 card ace hearts" style='top: 50%; left: 20%;'></div> <div class="middle flop2 card ace hearts" style='top: 50%; left: 32%;'></div> <div class="middle flop3 card ace hearts" style='top: 50%; left: 44%;'></div> <div class="middle turn card" style='top: 50%; left: 56%;'></div> <div class="middle river card" style='top: 50%; left: 68%;'></div> </div> </div> 

  ask by eguneys translate from so

Answer 1

Please add below css property to div having class "middle flop1 card ace hearts", it will solve your problem, and for more details visit : https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment(请在具有以下属性的div中添加css属性以下的div，该类具有“中间flop1卡ace心”类，它将解决您的问题，有关更多详细信息，请访问： https : //developer.mozilla.org/zh-CN/docs/Web/CSS/background -附件)

background-attachment: fixed;