Question

我正在尝试创建一个圆形照片库（主要是横向矩形图像）。它适用于第一张图像，但我不知道如何将其应用于所有图像，同时保持圆形格式。任何帮助都会受到赞赏，因为我还是新手。

这是我的HTML：

<div class="photos">
<img src="url">
<img src="url">
etc.. more images
</div>

然后我的CSS：

.photos {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}

img {
width: auto;
height: 100%;
margin-left: -50px;
display: inline-block;
}

Answer 1

将此添加到您的css，它适用于照片

中的所有img标记

 .photos img{
  border-radius: 50%;
}

<div class="photos"></div>

Answer 2

您应该使用.photos，其中包含一个图片，例如：

.photos {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

img {
  width: auto;
  height: 100%;
  margin-left: -50px;
  display: inline-block;
}

<div class="photos">
  <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/cardigan-welsh-corgi/chasing-8_680-453.jpg">
</div>
<div class="photos">
  <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/cardigan-welsh-corgi/chasing-8_680-453.jpg">
</div>

希望这有帮助！

Answer 3

尝试使用以下方法编辑您的CSS：

.photos img {
      display: inline-block;
      position: relative;
      width: 200px;
      height: 200px;
      overflow: hidden;
      border-radius: 50%;
    }
    img {
      width: auto;
      height: 100%;
      margin-left: -50px;
      display: inline-block;
    }

Answer 4

例如，您只需将每个图片放在自己的<div>中，并使用类round。

＆＃13;

    .round {
        display: inline-block;
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden;
        border-radius: 50%;
        background-color:blue;
    }

＆＃13;

    <div class='round'>
        <img src='yourImage'>
    </div>
    <div class='round'>
        <img src='yourImage'>
    </div>

＆＃13;

HTML / CSS多个圆形图像

4 个答案: