Question

style01

<figure>
        <picture>
          <source media="(min-width: 1200px)" srcset="./../../../assets/image/visual/main_visual01.jpg">
          <source media="(min-width: 992px)" srcset="./../../../assets/image/visual/main_visual01.jpg">
          <source media="(min-width: 768px)" srcset="./../../../assets/image/visual/main_visual01_m.jpg">
          <source media="(min-width: 320px)" srcset="./../../../assets/image/visual/main_visual01_m.jpg">
          <img src="./../../../assets/image/visual/main_visual01_m.jpg" class="visible-md visible-lg">
          <img src="./../../../assets/image/visual/main_visual01_m.jpg" class="visible-xs visible-sm">
        </picture>
        <figcaption class="blind">{{item.main_visual_desc}}</figcaption>
      </figure>

=============================================== =======================

style02

<figure>
        <picture>
          <source media="(min-width: 1200px)" srcset="./../../../assets/image/visual/main_visual01.jpg">
          <source media="(min-width: 992px)" srcset="./../../../assets/image/visual/main_visual01.jpg">
          <source media="(min-width: 768px)" srcset="./../../../assets/image/visual/main_visual01_m.jpg">
          <source media="(min-width: 320px)" srcset="./../../../assets/image/visual/main_visual01_m.jpg">
          <img src="./../../../assets/image/visual/main_visual01_m.jpg" style="width:auto">
        </picture>
        <figcaption class="blind">{{item.main_visual_desc}}</figcaption>
      </figure>

=============================================== ========================

我的标题

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>팝스애플 공방</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/css/app.component.compact.css">
  <link rel="icon" type="image/x-icon" href="popsapple_favicon.ico" />
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
</head>

它适用于Chrome，但不适用于Firefox。

Answer 1

Bootstrap有一个很好的class，可以自动将图像呈现为响应式图像。

响应式图片图片媒体大小无法在Firefox中运行

1 个答案: