master

分支 (1)

管理

管理

master

Light-Year-Admin-Using-Iframe-v5
/
lyear_content_images.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>图片 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>

<body>
<div class="container-fluid">

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">图片</div></header>
        <div class="card-body">

          <p>本文档及示例展示了如何让图片支持响应式行为（这样它们就不会超出父元素的宽度范围了）以及如何通过类（class）添加些许样式。</p>

          <h6>响应式图片</h6>
          <p>通过 Bootstrap 所提供的 <code>.img-fluid</code> 类让图片支持响应式布局。其原理是将 <code>max-width: 100%;</code> 和 <code>height: auto;</code> 赋予图片，以便随父元素的宽度变化一起缩放。</p>
          <div class="border-example">
            <svg class="bd-placeholder-img bd-placeholder-img-lg img-fluid" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Responsive image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>占位符</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">响应式图片</text></svg>
          </div>
          <pre>&lt;img src="..." class="img-fluid" alt="..."&gt;</pre>

          <h6>图片的缩略图</h6>
          <p>除了我们提供的 <code>border-radius</code> 实用类外，你还可以使用 <code>.img-thumbnail</code> 使图片的外观具有 1px 宽度的圆形边框。</p>
          <div class="border-example">
            <img src="images/img-placeholder.png" class="img-thumbnail" alt="...">
          </div>
          <pre>&lt;img src="..." class="img-thumbnail" alt="..."&gt;</pre>

          <h6>对齐图片</h6>
          <p>通过使用 <code>float</code> 工具类或文本对齐类将图片对齐。块级（block-level）图片可以使用 <code>.mx-auto</code> 外边距实用类居中对齐。</p>
          <div class="border-example">
            <img src="images/img-placeholder.png" class="rounded float-start" alt="...">
            <img src="images/img-placeholder.png" class="rounded float-end" alt="...">
          </div>
          <pre>&lt;img src="..." class="rounded float-start" alt="..."&gt;
&lt;img src="..." class="rounded float-end" alt="..."&gt;</pre>

          <div class="border-example">
            <img src="images/img-placeholder.png" class="rounded mx-auto d-block" alt="...">
          </div>
          <pre>&lt;img src="..." class="rounded mx-auto d-block" alt="..."&gt;</pre>

          <div class="border-example">
            <div class="text-center">
              <img src="images/img-placeholder.png" class="rounded" alt="...">
            </div>
          </div>
          <pre>&lt;div class="text-center"&gt;
  &lt;img src="..." class="rounded" alt="..."&gt;
&lt;/div&gt;</pre>

          <h6><code>&lt;picture&gt;</code></h6>
          <p>如果你使用 <code>&lt;picture&gt;</code> 元素为某个 <code>&lt;img&gt;</code> 指定多个 <code>&lt;source&gt;</code> 元素的话，请确保将 <code>.img-*</code> 类添加到 <code>&lt;img&gt;</code> 元素而不是 <code>&lt;picture&gt;</code> 元素上。</p>
          <pre>&lt;picture&gt;
  &lt;source srcset="..." type="image/svg+xml"&gt;
  &lt;img src="..." class="img-fluid img-thumbnail" alt="..."&gt;
&lt;/picture&gt;</pre>

        </div>
      </div>
    </div>

  </div>

</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
</html>