Question

我需要帮助html / css 在我的应用程序中上传配置文件中的照片，用户需要传递图像的网址，我将此网址保存在数据库中并将此网址放入我的HTML $ {user.fotoProfile}

然而，当图像具有相同的比例时，例如。 150x150，650x650，960x960无论如何。设置工作，填补我的领域，没有扭曲。

但是当图像的比例不相等时，图像区域会失真。

有人可以帮助我吗？

HTML

                     <div class="user-img">
                        <a href='profile'><img src="<c:url value="${user.fotoProfile}" />" alt="user-img" class="img-circle img-thumbnail img-responsive"></a>
                        <div class="user-status offline"><i class="zmdi zmdi-dot-circle"></i></div>
                    </div>

CSS

  .user-box .user-img {  position: relative;  height: 88px; width: 88px; margin: 0px auto; }

#wrapper.enlarged .user-box .user-img {  height: 48px;  width: 48px; }

Answer 1

将图像设置为背景图像并将其设置为填充div，这样就可以获得尺寸不适合的截止值：

＆＃13;

div {
  background: url('http://lorempixel.com/100/200') no-repeat center center;
  background-size: 100%;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

＆＃13;

<div></div>

＆＃13;

将url图像调整为相等的部分

1 个答案: