Question

我无法连续创建9个自适应CSS圆，每个圆中都包含一个img标签（而不是背景图片）。 img将根据父圆div的大小居中并调整大小。这9个圆圈显示在一行中，并包含在一个网格容器中，每个圆圈都分配给它自己的单元格。这9个数字（第5个数字）的中心是其他圆圈的两倍。

对于较小的圆形容器，我使用以下CSS：

border: blue 1px solid;
border-radius: 50%;
width: 100%;
height: 0%;
padding-top: 100%;
margin:auto;
overflow: hidden;

这是基于我在网上找到的各种教程以及其他堆栈溢出帖子中的建议。

img标记具有以下CSS：

width: 100%;
height: 100%;
object-fit: cover;

根据此处的本教程：https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

图像未显示-我相信是由于圆形容器中有填充物。但是我不确定如何更改此设置。如果我去掉填充物并增加容器的高度，它们将保持圆形，并且图像将按预期显示，但是它们不再响应-这意味着如果页面大小改变，它们将变为椭圆形。

以下是有关这些组件的小提琴：https://jsfiddle.net/jth3rb6m/

Answer 1

图像不圆的问题是由于图像不方形。

.friend-cont {
  display: grid;
  justify-content: space-around;
  grid-template-columns: calc(10% - 5px) calc(10% - 5px) calc(10% - 5px) calc(10% - 5px) calc(20% - 5px) calc(10% - 5px) calc(10% - 5px) calc(10% - 5px) calc(10% - 5px);
  grid-column-gap: 5px;
  grid-template-rows: auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: auto;
}

.friend-pic {
  border: blue 1px solid;
  border-radius: 50%;
  width: 100%;
  height: auto;
  /* height: 0%; */
  /* padding-top: 100%; */
  margin: auto;
  overflow: hidden;
}

.friend-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-pic {
  border: blue 1px solid;
  border-radius: 50%;
  /* height: 0%; */
  /* padding-top: 100%; */
  margin: auto;
  overflow: hidden;
}

<div class="friend-cont">

  <div class="profile-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

</div>

包含图像的响应式CSS圆div问题

1 个答案: