图像尺寸/分辨率基于网页布局

问题描述：

<!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设计。

我们根据客户（客户）要求的尺寸/分辨率，实时获得来自客户（客户）的图像。图像可以是客户的知识产权，直到网站投入生产。

问：

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

答

这样做的一种方法是将不同大小的图像放入模板中，然后确保浏览器呈现适当的图像。您可以使用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>

在现实的时候，我们从客户端获得的图像（我们努力的方向），我们需要给输入到最终图像尺寸和分辨率的客户端（客户）。由于图像可以是客户（客户）的知识产权，直到网站投入生产。 – overexchange

你说的图片是由用户上传的，对吧？看看这个https://github.com/respondcreate/django-versatileimagefield/它是标准图像字段的替代品，可以给你不同的分辨率 – Igonato

图像尺寸/分辨率基于网页布局

相关推荐