如何在添加超鏈接時保持圖像縮放
[英]How to Maintain Zoom on Image while Adding a Hyperlink
問題描述
我想在圖庫中添加到圖像的超鏈接（以便它可以打開更大版本的圖像），同時保持縮略圖上的“縮放”效果。 我嘗試向第一張圖像添加超鏈接，但縮放不再運行。 如果我的解釋不是很好，我很抱歉，我是編碼語言的新手！ 任何幫助都會很棒！
這是我獲得畫廊代碼的鏈接，如果它對任何人有用的話！ https://codepen.io/oknoblich/pen/ELfzd
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" > < /script> < script type = "text/javascript" > (function() { var documentElem = $(document), nav = $('nav'), lastScrollTop = 0; documentElem.on('scroll', function() { var currentScrollTop = $(this).scrollTop(); //scroll down if (currentScrollTop > lastScrollTop) nav.addClass('hidden'); //scroll up else nav.removeClass('hidden'); lastScrollTop = currentScrollTop; }); })(); < /script> <!-- End of Javascript for Navigation Menu -->
<style type="text/css">@import url('https://fonts.googleapis.com/css?family=Open+Sans:300'); * { margin: 0; padding: 0; box-sizing: border-box; } .gallery { width: 640px; margin: 0 auto; padding: 5px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .gallery>div { position: relative; float: left; padding: 5px; } .gallery>div>img { display: block; width: 200px; transition: .1s transform; transform: translateZ(0); /* hack */ } .gallery>div:hover { z-index: 1; } .gallery>div:hover>img { transform: scale(1.1, 1.1); transition: .3s transform; } .cf:before, .cf:after { display: table; content: ""; line-height: 0; } .cf:after { clear: both; } h1 { margin: 40px 0; font-size: 30px; font-weight: 300; text-align: center; } </style>
<body> <!-- Start of Navigation Bar --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li id="current"><a href="gallery.html">Gallery</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <!-- End of Navigation Bar --> <br /> <br /> <h1> Gallery </h1> <!-- Stat of Gallery --> <div class="gallery cf"> <!-- This is the image I tried to link but when I ran the code the zoom was no longer maintained. --> <div> <a href="Images/Optimized/FullImage_1.jpg"><img src="Images/Optimized/Thumbnail_1.jpg" width="200" height="300" alt="" /></a> </div> <div> <img src="Images/Optimized/Thumbnail_2.jpg" width="200" height="300" alt="" /> </div> <div> <img src="Images/Optimized/Thumbnail_3.jpg" width="200" height="300" alt="" /> </div> <div> <img src="Images/Optimized/Thumbnail_4.jpg" width="200" height="300" alt="" /> </div> <div> <img src="Images/Optimized/Thumbnail_5.jpg" width="200" height="300" alt="" /> </div> <div> <img src="Images/Optimized/Thumbnail_6.jpg" width="200" height="300" alt="" /> </div> </div>
2 個解決方案
解決方案1
1 2017-07-23 15:23:49
試試這個代碼
HTML和CSS
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 14px/1 'Open Sans', sans-serif; color: #555; background: #e5e5e5; } .gallery { width: 640px; margin: 0 auto; padding: 5px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .gallery>div { position: relative; float: left; padding: 5px; } .gallery>div>a>img { display: block; width: 200px; transition: .1s transform; transform: translateZ(0); /* hack */ } .gallery>div:hover { z-index: 1; } .gallery>div:hover>a>img { transform: scale(1.7, 1.7); transition: .3s transform; } .cf:before, .cf:after { display: table; content: ""; line-height: 0; } .cf:after { clear: both; } h1 { margin: 40px 0; font-size: 30px; font-weight: 300; text-align: center; }
<h1>Simple CSS Image Gallery with Zoom</h1> <div class="gallery cf"> <div> <a href=""><img src="http://abload.de/img/a6aawu.jpg" /></a> </div> <div> <a href=""><img src="http://abload.de/img/a6aawu.jpg" /></a> </div> <div> <a href=""><img src="http://abload.de/img/a6aawu.jpg" /></a> </div> <div> <a href=""><img src="http://abload.de/img/a6aawu.jpg" /></a> </div> <div> <a href=""> <img src="http://abload.de/img/a6aawu.jpg" /></a> </div> <div> <a href=""> <img src="http://abload.de/img/a6aawu.jpg" /></a> </div> </div>
希望這可以幫助..
解決方案2
1 已采納 2017-07-23 15:28:14
這是肯定會起作用的代碼，並且會以大尺寸顯示圖像。
https://jsfiddle.net/fsfrkru0/
HTML 和 CSS
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 14px/1 'Open Sans', sans-serif; color: #555; background: #e5e5e5; } .gallery { width: 640px; margin: 0 auto; padding: 5px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .gallery>div>a { position: relative; float: left; padding: 5px; } .gallery>div>a>img { display: block; width: 200px; transition: .1s transform; transform: translateZ(0); /* hack */ } .gallery>div:hover>a { z-index: 1; } .gallery>div:hover>a>img { transform: scale(1.7, 1.7); transition: .3s transform; } .cf:before, .cf:after { display: table; content: ""; line-height: 0; } .cf:after { clear: both; } h1 { margin: 40px 0; font-size: 30px; font-weight: 300; text-align: center; }
<h1>Simple CSS Image Gallery with Zoom</h1> <div class="gallery cf"> <div> <a href="http://abload.de/img/a6aawu.jpg" target="_blank"><img src="http://abload.de/img/a6aawu.jpg" styles="" /></a> </div> <div> <a href="http://abload.de/img/a6aawu.jpg" target="_blank"><img src="http://abload.de/img/a6aawu.jpg" styles="" /></a> </div> <div> <a href="http://abload.de/img/a6aawu.jpg" target="_blank"><img src="http://abload.de/img/a6aawu.jpg" styles="" /></a> </div> <div> <a href="http://abload.de/img/a6aawu.jpg" target="_blank"><img src="http://abload.de/img/a6aawu.jpg" styles="" /></a> </div> <div> <a href="http://abload.de/img/a6aawu.jpg" target="_blank"><img src="http://abload.de/img/a6aawu.jpg" styles="" /></a> </div> <div> <a href="http://abload.de/img/a6aawu.jpg" target="_blank"><img src="http://abload.de/img/a6aawu.jpg" styles="" /></a> </div> </div>
希望這會有所幫助。
解決方案3
0 2017-07-23 15:22:25
縮放是使用 css 完成的，並應用於懸停事件，如果您將元素應用於具有相同規則的類單擊事件，它將保留 css 屬性。
一開始我沒有得到正確的問題，但您還需要更改 CSS，.gallery>div>img 表示帶有類庫的元素緊跟一個 div 緊跟一個 img，以包含 img 和標簽需要刪除>“.gallery>div img”
如何在HTML5 Canvas上縮放圖像時保持寬高比？
[英]How to maintain the aspect ratio while scaling the image on HTML5 Canvas?
將圖像添加到超鏈接中不會在javascript中顯示該圖像
[英]adding an image into a hyperlink does not show the image in javascript
如何隱藏超鏈接下划線並在javascript中保持原字體顏色？
[英]How to hide the hyperlink underline and maintain the origin font color in javascripts?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.