0
我最近完成了開發我的交互式視頻庫。我只使用HTML和CSS。現在我在使其響應方面遇到問題。只要我調整瀏覽器的大小,圖像就會變得不合時宜。我希望圖庫改變不。根據瀏覽器的寬度,不影響畫廊的功能或懸停效果。 到我的項目文件夾中的鏈接 - https://drive.google.com/open?id=0Bx9r_Ov1lSfAYmxDcmJCSkY1MjA如何使我的圖片庫響應
任何幫助將是非常可觀的。
我最近完成了開發我的交互式視頻庫。我只使用HTML和CSS。現在我在使其響應方面遇到問題。只要我調整瀏覽器的大小,圖像就會變得不合時宜。我希望圖庫改變不。根據瀏覽器的寬度,不影響畫廊的功能或懸停效果。 到我的項目文件夾中的鏈接 - https://drive.google.com/open?id=0Bx9r_Ov1lSfAYmxDcmJCSkY1MjA如何使我的圖片庫響應
任何幫助將是非常可觀的。
您不能在項目中使用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>
非常感謝,它工作正常。但是兩篇文章之間的距離已經消失了,它不像以前那樣。 –
請提供你的代碼,你嘗試過什麼,你有什麼樣的想法...... – Armin
而不是創建一個plunker。 – Aravind
沒有看過這個項目 - 是否可以使用現有的框架,如magnific-popup和jquery? jquery幫助你管理圖像加載和magnific-popup是一個恕我直言好畫廊框架。 – Gunnar