响应圆和图像适合圆 [英] Responsive circle and image fit on circle

问题描述

我想创建一个响应圆，并且要拟合图像。我想将 img 标记与CSS（背景）一起使用

I want to create a responsive circle and I want to fit the image. I want to use img tag not with css (background)

这是我尝试过的

.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>

推荐答案

.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>

这篇关于响应圆和图像适合圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！