获得没有设置宽度或高度的div的背景图像的理想大小

时间：2022-09-04 08:39:11

I have the following Markup:

我有以下标记:

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

Where .jumbotron-personal-user has:

其中.jumbotron-personal-user有:

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

but the jumbotron itself has no fixed width or height, only bootstrap's default styles:

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

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

This is a blurred background, so more or less, it would't look bad. How can I let the user know what should the ideal measurements of an image be so that he can choose/make one so that it ca fit?

这是一个模糊的背景,所以或多或少,它看起来不会很糟糕。我怎样才能让用户知道图像的理想测量结果应该是什么,以便他可以选择/制作一个图像以使其适合?

Here's a picture of the interface of the profile:

这是配置文件界面的图片:

获得没有设置宽度或高度的div的背景图像的理想大小

1 个解决方案

#1

1  

There are lots of jquery plugins that can be use to crop images after uploading http://www.jqueryrain.com/demo/jquery-crop-image-plugin/ . OR you can create a script that determine whether the image's size can be used as cover and return a warning if the resolution/size is not good as photo. OR indicate the suggested image size at the upload window. You can also use CSS's background-size - I used it before for my project's cover photo.

上传http://www.jqueryrain.com/demo/jquery-crop-image-plugin/后,有很多jquery插件可用于裁剪图像。或者您可以创建一个脚本,确定图像的大小是否可以用作封面,如果分辨率/大小不合适,则返回警告。或指示上载窗口中建议的图像大小。你也可以使用CSS的背景大小 - 之前我用过我的项目封面照片。

#1

1  

There are lots of jquery plugins that can be use to crop images after uploading http://www.jqueryrain.com/demo/jquery-crop-image-plugin/ . OR you can create a script that determine whether the image's size can be used as cover and return a warning if the resolution/size is not good as photo. OR indicate the suggested image size at the upload window. You can also use CSS's background-size - I used it before for my project's cover photo.

上传http://www.jqueryrain.com/demo/jquery-crop-image-plugin/后,有很多jquery插件可用于裁剪图像。或者您可以创建一个脚本,确定图像的大小是否可以用作封面,如果分辨率/大小不合适,则返回警告。或指示上载窗口中建议的图像大小。你也可以使用CSS的背景大小 - 之前我用过我的项目封面照片。

标签：

相关文章