画像サイズ/解像度

ウェブページの下に与えられ、画像サイズ/解像度

<!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プロパティにすることができます。

質問：

開発プロセスの中、Webページの任意のレイアウトのために、Webページに埋め込む画像の最終的なサイズ/解像度を決定する方法、クライアント（顧客）に要求しますか？

出典

2017-08-31 overexchange

これを行う1つの方法は、テンプレートに異なるサイズの画像を配置し、ブラウザが適切な画像をレンダリングすることです。私たちは、クライアントからイメージを取得する（私達はのために働く）、我々は最終的な画像サイズ＆解像度にクライアント（顧客）への入力を与える必要があり、リアルタイムで

<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

：あなたはこのためにpicture htmlタグを使用することができます。イメージはクライアント（顧客）のIPプロパティになることができるので、ウェブサイトがプロダクションになるまでです。 – overexchange

あなたはイメージがユーザーによってアップロードされていると言っていますか？このhttps://github.com/respondcreate/django-versatileimagefield/を見てください。これは、異なる解像度を与えることができる標準的な画像フィールドの代わりです – Igonato

答えて

関連する問題