圖像尺寸/分辨率基於網頁佈局

對於下面的網頁給定的，圖像尺寸/分辨率基於網頁佈局

<!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設計。

我們根據客戶（客戶）要求的尺寸/分辨率，實時獲得來自客戶（客戶）的圖像。圖像可以是客戶的知識產權，直到網站投入生產。

問：

煙雨發展過程中，對請求的客戶端（客戶），如何確定圖像的最終大小/分辨率的網頁，嵌入，對網頁的任何給定的佈局？

來源

2017-08-31 overexchange

這樣做的一種方法是將不同大小的圖像放入模板中，然後確保瀏覽器呈現適當的圖像。您可以使用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>

來源

2017-08-31 13:16:49 Igonato

在現實的時候，我們從客戶端獲得的圖像（我們努力的方向），我們需要給輸入到最終圖像尺寸和分辨率的客戶端（客戶）。由於圖像可以是客戶（客戶）的知識產權，直到網站投入生產。 – overexchange

你說的圖片是由用戶上傳的，對吧？看看這個https://github.com/respondcreate/django-versatileimagefield/它是標準圖像字段的替代品，可以給你不同的分辨率 – Igonato

圖像尺寸/分辨率基於網頁佈局

回答

相關問題