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
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…