html - 为没有设置宽度或高度的 div 的背景图像获取理想尺寸

Question

我有以下标记:

<div class="jumbotron jumbotron-personal-user clearfix">
     <div class="container">
          <div class="row">
               <div class="col-lg-1 col-centered">
                    <img src="img/avatar04.png" class="profile-avatar">
               </div>
          </div>
      </div>
</div>

.jumbotron-personal-user 有:

.jumbotron-personal-user{ margin: 0 -15px !important; background: url(../img/blur-background08.jpg) center center fixed no-repeat;}

但是jumbotron本身没有固定的宽高，只有bootstrap的默认样式:

.jumbotron {
  padding: 30px;
  margin-bottom: 30px;
  font-size: 21px;
  font-weight: 200;
  line-height: 2.1428571435;
  color: inherit;
  background-color: #eeeeee;
}

这是一个模糊的背景，所以或多或少看起来还不错。我怎样才能让用户知道图像的理想测量值应该是多少，以便他可以选择/制作一个图像以使其适合？

这是个人资料界面的图片:

Answer 1

有很多 jquery 插件可用于上传后裁剪图像 http://www.jqueryrain.com/demo/jquery-crop-image-plugin/ .或者您可以创建一个脚本来确定图像的大小是否可以用作封面，并在分辨率/大小不如照片时返回警告。或在上传窗口中指明建议的图像尺寸。您还可以使用 CSS 的 background-size - 我之前将它用于我元素的封面照片。