1. 首页
  2. 问答
  3. 如何使我的图片库响应

如何使我的图片库响应

2017-01-27 44 views
0

我最近完成了开发我的交互式视频库。我只使用HTML和CSS。现在我在使其响应方面遇到问题。只要我调整浏览器的大小，图像就会变得不合时宜。我希望图库改变不。根据浏览器的宽度，不影响画廊的功能或悬停效果。 到我的项目文件夹中的链接 - https://drive.google.com/open?id=0Bx9r_Ov1lSfAYmxDcmJCSkY1MjA如何使我的图片库响应

任何帮助将是非常可观的。

来源

2017-01-27 Pranav Raghaw

+0

请提供你的代码，你尝试过什么，你有什么样的想法...... – Armin

+0

而不是创建一个plunker。 – Aravind

+0

没有看过这个项目 - 是否可以使用现有的框架，如magnific-popup和jquery？ jquery帮助你管理图像加载和magnific-popup是一个恕我直言好画廊框架。 – Gunnar

回答

0

您不能在项目中使用Bootstrap链接，并且可以删除文件中的内联样式。我已经解决了您的错误，它完美地工作......你可以尝试在你的项目文件夹，然后运行这个HTML文件...

<html> 
 
<head> 
 
\t <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
 
\t <link rel="stylesheet" type="text/css" href="thumb-css/style.css"> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
</head> 
 
<body> 
 
<div class="isotope-wrap"> 
 
    <div class="col-lg-12 offset-top-34"> 
 
     <div data-isotope-layout="fitRows" data-isotope-group="gallery" class="isotope isotope--loaded" style="position: relative; height: 2100px;"> 
 
      <div class="row"> 
 
       <div data-filter="All" class="col-xs-12 col-sm-6 col-lg-4 isotope-item"> 
 
        <div class="inset-xl-left-20 inset-xl-right-20"> 
 
         <a class="thumbnail-classic" href="index-variant-2.html" target="_blank"> 
 
      \t    <figure> 
 
           <img class="img-responsive" src="images/intense-570x428.jpg" alt=""> 
 
           <figcaption class="thumbnail-classic-caption text-center"> 
 
            <h4 class="thumbnail-classic-title text-light" style="font-family: 'Montserrat', sans-serif; color: #212121;text-transform: uppercase; text-align: center; font-weight: 100">Intense</h4> 
 
            <p class="thumbnail-classic-desc text-bold veil reveal-xs-block" style="font-family: 'Montserrat', sans-serif;text-transform: uppercase;font-weight: 100;text-align: center;">Feel the power of future</p> 
 
           </figcaption> 
 
          </figure> 
 
         </a> 
 
        </div> 
 
       </div> 
 
       <div data-filter="All" class="col-xs-12 col-sm-6 col-lg-4 isotope-item" > 
 
        <div class="inset-xl-left-20 inset-xl-right-20"> 
 
         <a class="thumbnail-classic" href="index-variant-2.html" target="_blank"> 
 
          <figure> 
 
           <img class="img-responsive" src="images/intense-570x428.jpg" alt=""> 
 
           <figcaption class="thumbnail-classic-caption text-center"> 
 
            <h4 class="thumbnail-classic-title text-light" style="font-family: 'Montserrat', sans-serif; color: #212121;text-transform: uppercase; text-align: center; font-weight: 100">Intense</h4> 
 
            <p class="thumbnail-classic-desc text-bold veil reveal-xs-block" style="font-family: 'Montserrat', sans-serif;text-transform: uppercase;font-weight: 100;text-align: center;">Feel the power of future</p> 
 
           </figcaption> 
 
          </figure> 
 
         </a> 
 
        </div> 
 
       </div> 
 
       <div data-filter="All" class="col-xs-12 col-sm-6 col-lg-4 isotope-item" > 
 
        <div class="inset-xl-left-20 inset-xl-right-20"> 
 
         <a class="thumbnail-classic" href="index-variant-2.html" target="_blank"> 
 
          <figure> 
 
           <img class="img-responsive" src="images/intense-570x428.jpg" alt=""> 
 
           <figcaption class="thumbnail-classic-caption text-center"> 
 
            <h4 class="thumbnail-classic-title text-light" style="font-family: 'Montserrat', sans-serif; color: #212121;text-transform: uppercase; text-align: center; font-weight: 100">Intense</h4> 
 
            <p class="thumbnail-classic-desc text-bold veil reveal-xs-block" style="font-family: 'Montserrat', sans-serif;text-transform: uppercase;font-weight: 100;text-align: center;">Feel the power of future</p> 
 
           </figcaption> 
 
          </figure> 
 
         </a> 
 
        </div> 
 
       </div> 
 
       <div data-filter="All" class="col-xs-12 col-sm-6 col-lg-4 isotope-item" > 
 
        <div class="inset-xl-left-20 inset-xl-right-20"> 
 
         <a class="thumbnail-classic" href="index-variant-2.html" target="_blank"> 
 
          <figure> 
 
           <img class="img-responsive" src="images/intense-570x428.jpg" alt=""> 
 
           <figcaption class="thumbnail-classic-caption text-center"> 
 
            <h4 class="thumbnail-classic-title text-light" style="font-family: 'Montserrat', sans-serif; color: #212121;text-transform: uppercase; text-align: center; font-weight: 100">Intense</h4> 
 
            <p class="thumbnail-classic-desc text-bold veil reveal-xs-block" style="font-family: 'Montserrat', sans-serif;text-transform: uppercase;font-weight: 100;text-align: center;">Feel the power of future</p> 
 
           </figcaption> 
 
          </figure> 
 
         </a> 
 
        </div> 
 
       </div> 
 
       <div data-filter="All" class="col-xs-12 col-sm-6 col-lg-4 isotope-item" > 
 
        <div class="inset-xl-left-20 inset-xl-right-20"> 
 
         <a class="thumbnail-classic" href="index-variant-2.html" target="_blank"> 
 
          <figure> 
 
           <img class="img-responsive" src="images/intense-570x428.jpg" alt=""> 
 
           <figcaption class="thumbnail-classic-caption text-center"> 
 
            <h4 class="thumbnail-classic-title text-light" style="font-family: 'Montserrat', sans-serif; color: #212121;text-transform: uppercase; text-align: center; font-weight: 100">Intense</h4> 
 
            <p class="thumbnail-classic-desc text-bold veil reveal-xs-block" style="font-family: 'Montserrat', sans-serif;text-transform: uppercase;font-weight: 100;text-align: center;">Feel the power of future</p> 
 
           </figcaption> 
 
          </figure> 
 
         </a> 
 
        </div> 
 
       </div> 
 
       <div data-filter="All" class="col-xs-12 col-sm-6 col-lg-4 isotope-item" > 
 
        <div class="inset-xl-left-20 inset-xl-right-20"> 
 
         <a class="thumbnail-classic" href="index-variant-2.html" target="_blank"> 
 
          <figure> 
 
           <img class="img-responsive" src="images/intense-570x428.jpg" alt=""> 
 
           <figcaption class="thumbnail-classic-caption text-center"> 
 
            <h4 class="thumbnail-classic-title text-light" style="font-family: 'Montserrat', sans-serif; color: #212121;text-transform: uppercase; text-align: center; font-weight: 100">Intense</h4> 
 
            <p class="thumbnail-classic-desc text-bold veil reveal-xs-block" style="font-family: 'Montserrat', sans-serif;text-transform: uppercase;font-weight: 100;text-align: center;">Feel the power of future</p> 
 
           </figcaption> 
 
          </figure> 
 
         </a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

来源

2017-01-27 16:12:43

+0

非常感谢，它工作正常。但是两篇文章之间的距离已经消失了，它不像以前那样。 –

相关问题

 相关问题