Question

对于以下给定的网页，

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

使用Django模板加载

<img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face">。

上页使用bootstrap css框架，用于响应式设计

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

合适的图像大小有助于创建响应式UI设计。

实时，我们根据客户（客户）请求的大小/分辨率从客户（客户）获取图像。图像可以是客户的IP属性，直到网站投入生产。

问题：

在开发过程中，对于请求客户端（客户），如何确定要嵌入网页的图像的最终大小/分辨率，对于任何给定的网页布局？

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

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

1 个答案: