如何以正确的纵横比显示响应式 5 扑克牌图像？

Question

我想显示 5 张扑克牌并排放置，水平边距就像在扑克桌上一样。我试过这个，但我不能让它显示：我也希望它具有响应性，即它在调整大小时保留纵横比。.card {  width: 100%;  height: 100%;  background-size: cover;}.is2d .two.hearts {background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLT<div class="poker is2d">    <div class="middle">      <div class="card two hearts"></div>       <div class="card two hearts"></div>      <div class="card two hearts"></div>      <div class="card"></div>      <div class="card"></div>    </div></div>

Answer 1

学习 flex 或 grid；两者都对这样的事情非常有用。

弹性示例：

html, body {

    height: 100%;

    margin: 0;

}

.card {

  border: 1px black solid;

  border-radius: 15px;

  flex-grow: 1;

  padding: 5px;

  margin: 5px;

}

.container {

  display: flex;

  height: 100%;

} 

<div class="container">

  <div class="card">1</div> 

  <div class="card">2</div>

  <div class="card">3</div>

  <div class="card">4</div>

  <div class="card">5</div>

</div>

Answer 2

正如 Armedin 所说，您的 div 中没有任何内容。Width并且height 100%不会做任何事情。

我建议你不要把图像作为背景，因为它不会改变 div 的尺寸。使用img标签和display: inline;卡片 div。

.card {

  width: 100%;

  height: 100%;

  background-size: cover;

  display:inline;

}

<div class="poker is2d">

    <div class="middle">

      <div class="card two hearts"> <img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4='/></div> 

      <div class="card two hearts"> <img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4='/></div>

      <div class="card two hearts"></div>

      <div class="card"></div>

      <div class="card"></div>

    </div>

</div>

编辑：如果您不想使用img，可以将 img 设置为不可见，然后使用背景图像，因为 div 内部仍然有 img 标签的尺寸。不是一个好的解决方案，但它会起作用。