Question

在我的ionic / angularJS应用中，我正在使用相机或图库来拾取照片并将其上传为头像。我的问题是，取决于源文件，如果图像较小或呈矩形，我将无法以希望具有适当舍入图像的方式调整其大小。你觉得呢？

这是我所拥有的：

或者在这里，相同的图像，但是放大太多了...

/* ZOOMED IN IMAGE CSS */

.menu-image-2 {
  position: relative;
  max-width: 150px;
  max-height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  left: 50%;
  transform: translateX(-50%);
}

.menu-image-2 > img {
   width: 150px;
   border-radius: 0%;
}

figure{
    width:150px;
    height:150px;
		left: 50%;
    transform: translateX(-50%);
}

/* CROPPED IMAGE CSS */

.moncompte-image {
  position: relative;
  max-width: 200px;
  max-height: 200px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  left: 50%;
  transform: translateX(-50%);
}

.moncompte-image > img {
  max-width: 200px;
  border-radius: 0%;
}

figure_monCompte{

}

figure_monCompte > img{
		max-width:200px;
    max-height:200px;
}

<!--ZOOMED IN IMAGE -->
 
 <div class="menu-image-2">
    <figure><img data-ng-src="xxxxx"></figure>
</div>


 <!-- CROPPED IMAGE -->
 
<div class="moncompte-image">
     <figure_monCompte>
           <img src="xxxxxx">         </figure_monCompte>
</div>

编辑：

我对第二个代码段有疑问，我想使用它，但是我需要将背景图像设置为css文件之外，但是尝试时该图像未设置为背景，因此结果是图像受到挤压，而不是有一个隐藏的溢出...您有想法要超越它吗？</ p>

#rounded-image {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    border: 5px solid rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

#rounded-image:before {
    content: "";
    /* background-image: url(https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg) center; */
    background-size: cover;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

 <img data-ng-src="{{avatar}}" id="rounded-image">

Answer 1

您需要将图像设置为背景图像，背景位置中心，包含背景尺寸，左上角为0，背景重复不重复

如果您未将图片指定为背景图片，则图片可能会被拉伸

*很抱歉，格式化仅在我的手机中阻塞

Answer 2

如我的评论中所述，您可以仅使用border-radius: 50%;，但您可能希望包括浏览器前缀：

img {
      border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    }

浏览器前缀：https://lifewire.com/css-vendor-prefixes-3466867

<img src="https://image.ibb.co/h9mYY0/moz.png" style="border-radius:50%;border: 5px solid rgba(0, 0, 0, 0.4);">

或者，您可以使用Psuedo元素，将图像设置为::before元素的背景图像...这样，您DIV的边框半径将正常工作：{{3 }}

或者作为DIV本身的背景图片，尽管这样会使您的灵活性降低。

使用Psuedo元素的新片段，适用于矩形和小图像：

#rounded-image {
      border-radius: 50%;
    width: 150px;
    height: 150px;
    border: 5px solid rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

#rounded-image:before {
    content: "";
    background-image: url(https://ichef.bbci.co.uk/news/976/cpsprodpb/9947/production/_103893293_ec317eb7-0fa2-4ec8-ab8e-53c9ce976a63.jpg);
    background-size: cover;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

<div id="rounded-image"></div>

更新：

<style>
#rounded-image:before {
        background-image: url('{{bgImg}}');
}
</style>
<div id="rounded-image"></div>

很显然，其余样式仍然需要CSS文件，但是可以在页面的<head>中或在标记之前，但是<head>更好... < em>幼稚的笑声

无论源形状和大小如何如何对图像进行取整？

2 个答案: