基于网页布局的图像大小/分辨率答案

【问题标题】：Image size/resolution based on webpage layout基于网页布局的图像大小/分辨率
【发布时间】：2018-02-09 10:33:19
【问题描述】：

对于下面给出的网页，

<!DOCTYPE html>
<html lang="en">
<head>
    <title>xyz</title>
    <meta charset="utf-8" />
    {% load staticfiles %}
    <link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
    <meta name="viewport" content = "width=device-width, initial-scale=1.0">

    <style type="text/css">
        html,
        body {
          height:100%
        }
    </style>
</head>

<body class="body" style="background-color:#f6f6f6">
    <div class="container-fluid" style="min-height:95%; ">
        <div class="row">
              <div class="col-sm-2">
                  <br>
                  <center>
                    <img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face">
                  </center>
              </div>
              <div class="col-sm-10">
                  <br>
                  <center>
                  <h3>My blog</h3>
                  </center>
              </div>
        </div><hr>

        <div class="row">
          <div class="col-sm-2">
          <br>

          <br>
           <!-- Great, til you resize. -->
            <!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
            <div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
              <ul class="nav nav-pills nav-stacked">
                <li><a href='/'>Home</a></li>
                <li><a href='/blog/'>Blog</a></li>
                <li><a href='/contact/'>Contact</a></li>
              </ul>
            </div> <!--well bs-sidebar affix-->
          </div> <!--col-sm-2-->
          <div class="col-sm-10">

            <div class='container-fluid'>
            <br><br>
               {% block content %}
               {% endblock %}   
            </div>
          </div>
        </div> 
    </div>
    <footer>
        <div class="container-fluid" style='margin-left:15px'>
            <p><a href="#" target="blank">Contact</a> | <a href="#" target="blank">LinkedIn</a> | <a href="#" target="blank">Twitter</a> | <a href="#" target="blank">Google+</a></p>
        </div>
    </footer>   

</body>

</html>

<img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face"> 是使用 Django 模板加载的。

以上页面使用引导 css 框架，用于响应式设计

图像大小/分辨率会影响网络带宽的利用率。

适当的图片尺寸有助于创建响应式 UI 设计。

根据我们向客户（客户）请求的尺寸/分辨率，我们实时从客户（客户）那里获取图像。图片可以是客户端的 IP 财产，直到网站投入生产。

问题：

在开发过程中，为了向客户（客户）提出请求，对于任何给定的网页布局，如何确定要嵌入网页的图像的最终尺寸/分辨率？

【问题讨论】：

标签： css django image user-interface responsive-design

【解决方案1】：

一种方法是在模板中放置不同大小的图像，然后确保浏览器呈现适当的图像。您可以为此使用picture html 标记：

<picture class="responsive-img" style='max-height:100px;' alt="face">

    <!-- low-res, default -->
    <source src="{% static 'personal/img/profile.jpg' %}">

    <!-- med-res -->
    <source src="{% static 'personal/img/profile.medium.jpg' %}" 
            media="(min-width: 400px)">

    <!-- high-res -->
    <source src="{% static 'personal/img/profile.large.jpg' %}" 
            media="(min-width: 800px)">

    <!-- Fallback content -->
    <img  src="{% static 'personal/img/profile.jpg' %}" alt="face">
</picture>

【讨论】：

实时，我们从客户（我们为之工作）获取图像，我们需要向客户（客户）提供最终图像大小和分辨率的输入。因为图像可以是客户（客户）的 IP 财产，直到网站投入生产。
你是说图片是用户上传的，对吧？看看这个github.com/respondcreate/django-versatileimagefield，它是标准图像字段的替代品，可以为您提供不同的分辨率