响应的圈子和图像适合圈子

时间:2017-01-10 13:44:27

标签: html css responsive

我想创建一个响应式圈子,我想要适合图像。我想使用img标记而不是css(背景)

以下是我尝试的内容

.circular--portrait {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--portrait img {
  width: 100%;
  height: auto;
}

<div class="circular--portrait">
                <img src="img.jpg" />
            </div>

4 个答案:

答案 0 :(得分:2)

.circular--portrait {
  position: relative;
  width: 20vw;
  height: 20vw;
  overflow: hidden;
  border-radius: 50%;
}
.circular--portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="circular--portrait">
  <img src="http://beerhold.it/500/300" />
</div>

答案 1 :(得分:1)

这是一种解决方案,可以使图像根据其父容器的宽度进行响应。

.container {
  /* Feel free to adjust the values here so you can see it being responsive */
  width: 200px;
}

.circle {
  position: relative;
  width: 100%;
  height: 0;
  padding: 100% 0 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid gray;
}

.circle img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="container">
  <div class="circle">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Chapultepec_Zoo_-_Jaguar_%2802%29.jpg/2560px-Chapultepec_Zoo_-_Jaguar_%2802%29.jpg" />
  </div>
</div>

您可以在CodePen上试用

答案 2 :(得分:0)

您可以尝试使用SCSS。你只需要创建一个变量。

$width: calc(100vw / 5);
.circle {
  width: $width;
  height: $width;
  background: url('https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350');
  border-radius: 50%;
  float: left;
  margin: 5px;
}
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

please see the fiddle

答案 3 :(得分:0)

您可以尝试使用SCSS。你只需要创建一个变量。

&#13;
&#13;
$width: calc(100vw / 5);
.circle {
  width: $width;
  height: $width;
  border-radius: 50%;
  float: left;
  margin: 5px;
  background: red;
  overflow: hidden;
}
&#13;
<div class="circle">
  <img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="circle">
  <img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="circle">
  <img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="circle">
  <img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
&#13;
&#13;
&#13; Please see the fiddle